前言

一個好的代碼規(guī)范 會讓自己以及后來者更容易解讀 ，而代碼拆分也是一樣的 這樣的話 也更容易進行更改

正題

• .安裝
  • 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()的可以去我的另一篇簡書
  • 純原生實現(xiàn)彈出層 @于志程后面有寫到Vue.use()使用場景以及原理
• 到這里我們開始進行二次封裝axios
  • 創(chuàng)建一個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 的參數(shù)調(diào)用）：

//@于志程
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)

響應(yīng)攔截器：

//@于志程
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('未授權(quán)請重新登錄')
                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('服務(wù)器端出錯')
                break;
            case 501:
                console.log('網(wǎng)絡(luò)為未實現(xiàn)')
                break;
            case 502:
                console.log('網(wǎng)絡(luò)錯誤')
                break;
            case 503:
                console.log('服務(wù)不可用')
                break;
            case 504:
                console.log('網(wǎng)絡(luò)超時')
                break;
            case 505:
                console.log('http版本不支持該請求')
                break;


            default:
                console.log(`連接錯誤${err.response.status}`)
        }
    } else {
        console.log('連接到服務(wù)器失敗 ')
    }
});

看累了嗎?。∪タ纯碄一片精華面試題前端常見面試題（十）@郝晨光

結(jié)言

感謝您的查閱，本文由@于志程整理并總結(jié)，代碼冗余或者有錯誤的地方望不吝賜教；菜鳥一枚，請多關(guān)照