封裝axios

request.js中

// 第四種封裝中使用攔截器
export function request( config ){
　　// 1.建立axios的例項
　　const instance = axios.create({
　　　　baseUrl: 'http://222.111.33.33:8000',　　 // 根路徑
　　　　timeout: 
 
5000,　　　　　　　　　　　　　　　　// 請求時間
　　　　header: {}            　　　　　　　　　　　// 請求頭
})

　　// 2.axios的攔截器
　　// 2.1請求攔截，一個引數是config( 成功的函式 )，一個引數是err( 失敗的函式 )，傳送成功回撥config函式，傳送失敗回撥err函式
　　instance.interceptors.request.use( config => {
　　// 1.修改config中的資訊
　　// 2.傳送請求是顯示loading圖示，請求成功後( .then中 )隱藏
　　// 3.某些請求必須攜帶一些特殊的資訊，( 如：token )
　　　　
 
return config            // 攔截成功後最後一定要返回
　　}, err => {

　　})

　　// 2.2響應攔截，一個引數是res( 成功的函式 )，一個引數是err( 失敗的函式 )，傳送成功回撥res函式，傳送失敗回撥err函式
　　instance.interceptors.response.use( res => {
　　　　return res.data            // 攔截成功後最後一定要返回，使用res中的data就返回res.data
　　}, err => {

　　})

　　// 3.傳送真正的網路請求( instance的返回值就是一個Promise )
 

　　return instance( config )
　　}

二次封裝

　　在src目錄下新建目錄(api)，api目錄下新建各頁面的介面檔案，例：test.js檔案

　　test.js檔案中需要匯入 request.js，然後匯出對應介面的方法

test.js檔案中

import { request } from "../utils/request.js"

export function testFun(info) {
    return request5({
        url: '/p/94576097/8aatcntl',            　　　 // 請求路徑
        method: 'post',                              // 請求方式
        params: info                                 // 請求引數
    })
}

頁面中使用

import { testFun } from '../api/test.js'        // 匯入test檔案

methods:{
    getList(){
        testFun({page:this.page}).then( res =>
            console.log(res, '成功');
        ).catch( err => {
             console.log(err, '失敗');
        })
    }
}

完整小Demo

碼雲地址：https://gitee.com/xhxdd/axios-test