vue.js使用axios

使用axios的兩種調用方式

1.安裝axios

$ cnpm install axios

 

2.在vue入口文件main.js中引入(推薦全局引入)，或是在當前頁面中引入(局部)

import axios from 'axios';

 

方法一：

在頁面中直接調用，代碼如下：

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
      .catch(error => console.log(error))
} })

 

方法二：

如果我們的頁面經常需要請求接口獲取數據，而且邏輯代碼比較多的話，不妨將axios提取出來，封裝到一個api的文件中，然后在頁面中引入直接調用，這樣看起來頁面會簡潔很多

接口全部放到api文件中方便管理，API文件代碼如下：

api/index.js

import _axios from 'axios'

/**
 * 配置axios的新實例
 */
const axios = _axios.create({
    baseURL: '',
    timeout: 1000
})

/**
 * 錯誤、警告提示
 */
axios.interceptors.response.use(function (response) {
  const { data } = response
  if (data.code !== 0) {
    Vue.prototype.$snack.error({
      message: data.message
    })
    return Promise.reject(data)
  } else {
    return data.data
  }
}, function (error) {
  Vue.prototype.$snack.error({
    message: error.message
  })
  return Promise.reject(error)
})

export const userApi = {
  //獲取用戶列表
  getUserList (params) {
    return axios({
      url:  '/api/user/users',
      method: 'get',
      params
    })
  },

  //刪除用戶
  deleteUser (id) {
    return axios({
      url: '/api/user/user',
      method: 'delete',
      params: {
        id
      }
    })
  }
}

 

頁面引入

user/index.vue

import {userApi} from '../../api'

export default {
  data:(){
      return {
          userList:[],
          offset: 0,
          pageSize: 10
        }  
    },
     methods: {
        //獲取用戶列表
        async getUserList(){
            const params = {
                offset: this.offset,
                pageSize: this.pageSize
            }
          this.userList = await userApi.getUserList(params)
      }
    },
　　。
　　。
　　。
　　。
}

 

還不清楚的可以看下官方文檔 https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html