在VUE中科学使用axios

在项目中安装axios

$ npm install axios

封装axios

新建api/index.js文件，对axios进行简单的封装，方便使用。真正业务中还需要设置header，保存token等。

// 引入axios
import axios from 'axios'
// 引入qs库转换参数格式
import qs from 'qs'

// axios全局配置
axios.defaults.timeout = 3000                      // 超时时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'        // 配置请求头
axios.defaults.baseURL = 'https://api.example.com'   // 配置接口地址

// 添加响应拦截器，统一处理服务器响应和异常
axios.interceptors.response.use(
    (response) => {
      // 请求正常则返回
      return Promise.resolve(response)
    },
    (error) => {
      // 请求错误进行的处理可以写在这里
      if (err && err.response) {
          switch (err.response.status) {
              case 400:
              err.message = '错误请求'；
              break；
              case 401:
              err.message = '未授权，请重新登录'；
              break；
              case 403:
              err.message = '拒绝访问'；
              break；
              case 404:
              err.message = '请求错误,未找到该资源'；
              break；
              case 405:
              err.message = '请求方法未允许'；
              break；
              case 408:
              err.message = '请求超时'；
              break；
              case 500:
              err.message = '服务器端出错'；
              break；
              case 501:
              err.message = '网络未实现'；
              break；
              case 502:
              err.message = '网络错误'；
              break；
              case 503:
              err.message = '服务不可用'；
              break；
              case 504:
              err.message = '网络超时'；
              break；
              case 505:
              err.message = 'http版本不支持该请求'；
              break；
              default:
              err.message = `连接错误${err.response.status}`
          }
      }
      return Promise.reject(error)
    }
  )

export default {
     /**
      * post方法，对应post请求
      * @param {String} url [请求的url地址]
      * @param {Object} params [请求时携带的参数]
      */
     post (url, params) {
       return new Promise((resolve, reject) => {
         axios.post(url, qs.stringify(params))
           .then(res => {
             resolve(res.data)
           })
           .catch(err => {
             reject(err)
           })
       })
     },
     /**
      * get方法，对应get请求
      * @param {String} url [请求的url地址]
      * @param {Object} params [请求时携带的参数]
      */
     get (url, params) {
       return new Promise((resolve, reject) => {
         axios.get(url, {params: param})
           .then(res => {
             resolve(res.data)
           })
           .catch(err => {
             reject(err)
           })
       })
     },
}

在项目入口文件main.js中引入api/index.js

import api from './api/index.js'
Vue.prototype.$api = api

在vue文件的methods中使用

methods: {
    // 获取测试列表数据
    getList() {
        let params = { id: "123" }
        this.$api.post("/list",params).then((res) => {
            console.log(res)
        }).catch((err) => {
            console.log(err)
        })
    }
}

axios使用起来非常方便，有以下特点

支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

具体可以参考axios的中文文档
http://www.axios-js.com/zh-cn/docs/

axios.png