Vue-cli3.0二次封装axios @于志程

前言

一个好的代码规范 会让自己以及后来者更容易解读 ，而代码拆分也是一样的 这样的话 也更容易进行更改

正题

• .安装
  • npm install -save axios
  • yarn add axios
  • cnpm install -S axios
• 以上三种方法安装
  • 接下来 在main.js 中引入
  • import axios from ’axios‘
  • axios不需要使用Vue.use() 因为axios 里面没写install
  • 不懂为什么axios不用Vue.use()的可以去我的另一篇简书
  • 纯原生实现弹出层 @于志程后面有写到Vue.use()使用场景以及原理
• 到这里我们开始进行二次封装axios
  • 创建一个http的文件夹 名称不是固定的 我们一般喜欢用这个名字
  • 在http文件里面新建api.js 文件
  • 引入 axios
  • import axios from ’axios‘
  • 对post ，get请求进行封装

get请求

/**
* 封装get方法
* @param url
* @param api
* @param params
* @returns {Promise}
*/
//@于志程
export function get(url, api, params) {
 return axios({
     method: 'get',
     url: api,
     baseURL: url,
     headers: {
         "Content-Type": "application/json:charset=UTF-8"
     },
     params: params
 })
     .then(response => response.data)
     .catch(err => {
         console.log(err)
     })
}

postJson请求方法

/**
 * 封装postJson方法
 * @param url
 * @param api
 * @param data
 * @returns {Promise}
 */
//@于志程
export function postJson(url, api, data) {
    return axios({
        method: 'post',
        url: api,
        baseURL: url,
        headers: {
            "Content-Type": "application/json"
        },
        data: data
    })
        .then(response => response.data)
        .catch(err => {
            console.log(err)
        })
}

postFrom 方法

/**
 * 封装postFrom方法
 * @param url
 * @param api
 * @param data
 * @returns {Promise}
 */
//@于志程
export function postFrom(url, api, data) {
    return axios({
        method: 'post',
        url: api,
        baseURL: url,
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        data: data,
        transformRequest: [function (data) {
            let ret = '';
            for (var i in data) {
                ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
            }
            return ret
        }]
    })
        .then(response => response.data)
        .catch(err => {
            console.log(err)
        })
}

封装完成了之后对它们进行输出（install 方法将被作为 Vue 的参数调用）：

//@于志程
import './intercept/resIntercept';
import { get } from './request/get'
import { postJson } from './request/postJson'
import { postFrom } from './request/postFrom'
export default {
    install(Vue) {
        Vue.prototype.$get = (url, api, params) => get(url, api, params)
        Vue.prototype.$postJson = (url, api, data) => postJson(url, api, data)
        Vue.prototype.$postFrom = (url, api, data) => postFrom(url, api, data)
    }
}

• 在mian.js中引入并且注册
  • import api from './services/http/api'
  • Vue.use(api)

响应拦截器：

//@于志程
export default axios.interceptors.response.use(response => {
    return response;
}, err => {
    if (err && err.response) {
        switch (err.response.status) {
            case 400:
                console.log('错误请求')
                break;
            case 401:
                this.$store.commit('delToken')
                console.log('未授权请重新登录')
                break;
            case 403:
                console.log('拒绝访问')
                break;
            case 404:
                console.log('请求错误,未找到该资源')
                break;
            case 405:
                console.log('请求方法未允许')
                break;
            case 408:
                console.log('请求超时')
                break;
            case 500:
                console.log('服务器端出错')
                break;
            case 501:
                console.log('网络为未实现')
                break;
            case 502:
                console.log('网络错误')
                break;
            case 503:
                console.log('服务不可用')
                break;
            case 504:
                console.log('网络超时')
                break;
            case 505:
                console.log('http版本不支持该请求')
                break;


            default:
                console.log(`连接错误${err.response.status}`)
        }
    } else {
        console.log('连接到服务器失败 ')
    }
});

看累了吗！！去看看@一片精华面试题前端常见面试题（十）@郝晨光

结言

感谢您的查阅，本文由@于志程整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照