axios的封装

 

封装axios

　　src目录下新建一个目录( utils )，目录下新建一个js文件( request.js )

　　如果只有一个实例，可以写为 export default request

　　为了考虑拓展性，可能会有多个实例，采用以下方式：

request.js中

  import axios from 'axios'

// 第四种封装中使用拦截器
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 => {
　　　　// 可以在这里判断接口返回的状态，比如请求成功则返回res.data，请求成功但有错误则返回res.message,token过期则返回res.message，并且清除token跳转到登录页
　　　　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