Vue中axios的网络请求封装

前言

  在我们前后端分离的项目中，一般会使用http交互，vue推荐使用的网络请求框架是axios，其实就是在ajax基础上封装的框架，但是我们还可以在代码里对axios进行进一步的封装，方便我们直接使用。

步骤

（1）在vue的src根目录下创建utils包，在utils包下创建api.js文件(名字可以自定义），对各种类型的请求进行封装。

import axios from 'axios'
//根路径 方便全局修改
let  base = '';

//post请求 键值对拼接在url地址上
export const postKeyValueRequest = (url ,params) => {
    return axios({
        method: 'post',
        //注意这里的``不是''
        url: `${base}${url}`,
        data: params,
        //对参数进行url拼接
        transformRequest: [function (data){
            let ret = '';
            for(let i in data){
                //encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
                /*
                因为在作用与url当作参数传递的时候，如参数出现空格这样的特殊字段，
                后台只可以读取到空格前的内容，后面内容丢失，造成数据读取失败，
                但是如果用encodeURIComponent()包裹一下，那会将这些特殊字符进行转义，这样后台就可       以成功读取了，
                所以encodeURIComponent()用于url作为参数传递的场景中使用
                 */
                ret += encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
            }
            console.log(ret)
            return ret;
        }],
        headers: {
            'Content-Type':'application/x-www-form-urlencoded'
        }
    })
}

export const  postRequest = (url,params) => {
    return axios({
        method: 'post',
        data: params,
        url: `${base}${url}`,
    })
}

export const  putRequest = (url,params) => {
    return axios({
        method: 'put',
        data: params,
        url: `${base}${url}`,
    })
}

export const  getRequest = (url,params) => {
    return axios({
        method: 'get',
        params: params,
        url: `${base}${url}`,
    })
}

export const  deleteRequest = (url,params) => {
    return axios({
        method: 'delete',
        params: params,
        url: `${base}${url}`,
    })
}

（2）每次进行网络请求时都有失败与成功两种情况，失败一般都是提醒用户，所以可以对网络请求异常进行统一的处理。

import { Message } from 'element-ui'
//利用axios的返回结果的拦截器
axios.interceptors.response.use(success => {
    //可能成功 可能失败 但是成功与失败都是200
    //success.status与 success.data.status == 500区别 前者是http响应码 后者是我自定义的数据格式
    console.log(success)
    if(success.status && success.status == 200 && success.data.status == 500){
        //通过弹框进行提示，你也可以自己处理进行显示
        Message.error({message:success.data.msg})
        return;
    }
    if(success.data.msg){
        Message.success({message:success.data.msg})
    }
    return success.data;
},error => {
    //访问一定失败 400及400以上
    if(error.response.status == 504 || error.response.status == 404){
        Message.error({message:'服务器被吃了( ╯□╰ )'})
    }else if (error.response.status == 403) {
        Message.error({message: '权限不足，请联系管理员'})
    } else if (error.response.status == 401) {
        Message.error({message:'尚未登录，请登录'})
    } else {
        if (error.response.data.msg) {
            //后端返回的错误
            Message.error({message: error.response.data.msg})
        } else {
            Message.error({message: '未知错误!'})
        }
    }
    return;
})

我自定义的数据格式

{"status":200,"msg":"注销成功","obj":null}

(3)如何使用

import {getRequest} from "../utils/api";
  
  getRequest()

每次使用都要先进行引入，我们可以利用vue插件进行优化，插件通常用来为 Vue 添加全局功能
打开main.js文件添加如下代码

import {postKeyValueRequest} from "./utils/api";
import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {getRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";

Vue.prototype.postKeyValueRequest = postKeyValueRequest
Vue.prototype.postRequest = postRequest
Vue.prototype.putRequest = putRequest
Vue.prototype.getRequest = getRequest
Vue.prototype.deleteRequest = deleteRequest

优化后的使用方式,直接用this进行引用

		this.postKeyValueRequest('/doLogin',this.loginForm).then(resp =>{
              if(resp){
               
              }
        })

以后项目中就可以复用这套请求框架了！！！