axios的封装使用

封装axios对vue的ajax错误进行统一处理

1.    为什么要封装axios直接用不好么？

通常ajax返回的请求错误有两种一种是网络问题或者代码本身的问题造成的错误如400，404，500等，另一种是由后端校验抛出的错误

以axios为例ajax请求一般这么写才能抛出错误

import axios from'axios'

axios.get('/user?ID=12345')

  .then(function (response) {

    if (response.data.code === 200) {

        console.log(response.data)

    } else {

        // 由后端抛出的错误

        alert(response.data.message)

    }

  }).catch(function (error) {

       // 由网络或者服务器抛出的错误

     alert(error.toString())

  })

从代码出可以看出如果我们每次都需要这么做是不是很麻烦，先要抛出网络产生的错误然后还要抛出后台的错误

2.    如何做？

（1）首先创建fetch.js文件然后引入两个库

import axios from'axios'

import qs from'qs'

为什么要引用这个qs的库来解析参数后面会提到 

 （2）利用请求拦截器做出预处理

请求时的拦截器

axios.interceptors.request.use(config => {

    // 这里可以加一些动作, 比如来个进度条开始动作,

    NProgress.start()

    return config //返回配置信息

}, error=> {

    return Promise.reject(error)})

请求完成后的拦截器

axios.interceptors.response.use(response => {

    return response}, 

error=> {// 这里我们把错误信息扶正, 后面就不需要写 catch 了

    return Promise.resolve(error.response)})

这里的return response返回的是一个对象, 内容如下:  

{  // 服务器提供的响应

  data: {},

 // 服务器响应的HTTP状态代码

  status: 200,

  // 服务器响应的HTTP状态消息

  statusText: 'OK',

  // 服务器响应头

  headers: {},

  // axios 的配置

  config: {}

}

（3）接下来就是请求的封装这里只封装常用的post和get请求

exportdefault {

    post(url, data) {

        returnaxios({

            method: 'post', // 请求协议

            url: url, // 请求的地址

            data:qs.stringify(data), // post 请求的数据

            timeout: 30000, // 超时时间, 单位毫秒

            headers: {

                'X-Requested-With': 'XMLHttpRequest',

                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'

            }

        })

    },

    get(url, params) {

        returnaxios({

            method: 'get',

            url: url,

            params, // get 请求时带的参数

            timeout: 30000,

            headers: {

                'X-Requested-With': 'XMLHttpRequest'

            }

        })

    }

}

*注：这里解释一下为什么要使用qs库的原因，因为qs.stringify(data)这样包一下配合headers里面的content-Type的配置可以转成表单数据的提交，让后端可以直接用$_POST拿到相应的数据这里特指的是PHP的后端，axios默认的是application/json的请求头如果不使用该方式即使设置了请求头还是json的形式。这里为什么当请求头为www-form-urlencoded-format这样的方式时可以通过$_POST可以接受post传来的参数可以查看以下文章https://www.cnblogs.com/gamedaybyday/p/7028128.html。这里最后再解释一下qs.stringify 这个方法的作用，主要是讲url序列化以&符号进行拼接结果如下：

const Qs = require('qs');

let obj= {

     method: "query_sql_dataset_data",

     projectId: "85",

     appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",

     datasetId: " 12564701"

   };

Qs.stringify(obj);

console.log(Qs.stringify(obj));

（4）最后统一处理一下状态码和后台的响应码

function checkStatus(response) {

    // 这里可以加一些动作, 比如来个进度条结束动作

    NProgress.done()

    // 如果 http 状态码正常, 则直接返回数据

    if (response.status === 200|| response.status === 304) {

 return {

        code: 0,

        msg: res.data.msg || res.statusText,

        data: res.statusText

    }// 这里, 如果不需要除 data 外的其他数据, 可以直接 return response.data, 这样可以让后面的代码精简一些

    }

    // 异常状态下, 把错误信息返回去

    // 因为前面我们把错误扶正了, 不然像 404, 500 这样的错误是走不到这里的

    return {

    data: {

            code: -404,

            message: response.statusText,

            data: response.statusText,

        }

    }// 如果上面你 return 的是 response.data, 那么这里可以写成

    // return {

    //    code: -404,

    //    message: response.statusText,

    //    data: response.statusText,

    //}

}

再来处理来自程序端的错误, 创建一个checkCode的函数

function checkCode(res) {

    // 如果状态 code 异常(这里已经包括网络错误, 服务器错误, 后端抛出的错误), 可以弹出一个错误提示, 告诉用户

    if (res.data.code!== 200) { // 或者是res.code, 视上面你返回的数据来决定

        Message({

          message: res.msg,

          type: 'error',

          duration: 2 * 1000

        })

    }

    return res

}

这里的message对象是我引用的elementUI的提示框

 

如何使用该封装js需要在组件中引用同

import axios from '../../utils/fetch'

exportdefault {

  async mounted() {

    const { data: { code, data }} = await api.post('/api/comment/post', {
title: 'title'})

    if(code === 200) {

        console.log(data)

}

    const{ data: { code, data }} = awaitapi.get('/api/comment/get', {
page: 1})

    if(code === 200) {

  console.log(data)

    }

  }

}