我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情

正常使用axios：

1. 先引入

npm i axios

2. 在组件中发送请求：

// 一般axios放在created()里面
created(){
    axios.get("这里放接口全地址")
    .then(res=>{
      	console.log(res.data);
    })
    .catch(err=>{
      	console.log(err);
    })
},

正常的写法不够优雅，一个项目下来冗余较多，为此，我们需要封装axios，把所有的axios请求事先配置好，预留好要用到的参数等，将其作为新的axios返回。

封装axios

在vuecli的src目录下，新建request文件夹，在request文件夹里新建request.js文件。 request.js中：

import axios from "axios"


const instance = axios.create({
    baseURL: "http://kumanxuan1.f3322.net:8001",
    timeout: 5000
});

// 拦截器     技术点
instance.interceptors.request.use(config => {
    //什么时候执行这个函数？　　　　发请求之前执行这个函数
    // 可以判断用户有没有登录， 如果没有登录，就直接return，  请求就不会出去
    // console.log("config:", config);  // 本次请求的一些信息
    // if(true){
    //     return
    // }
    return config
}, err => {

    return Promise.reject(err)
})

instance.interceptors.response.use(res => {
    //什么时候执行这个函数？　　　　在接收到响应之前，在执行then方法之前

    // console.log("res:", res);  // 本次服务器响应的一些信息

    return res.data    // 返回的这个res 被then方法的res形参接收了
}, err => {

    return Promise.reject(err)
})


export default instance

可以精简一下：

import axios from "axios"

const instance = axios.create({
    // 在这里引入基础url，后面的接口拼接在baseURL
    baseURL: "http://kumanxuan1.f3322.net:8001",
    timeout: 5000
});

instance.interceptors.request.use(config => {
    return config
}, err => {
    return Promise.reject(err)
})

instance.interceptors.response.use(res => {
    return res.data
}, err => {
    return Promise.reject(err)
})

export default instance

为了方便管理接口，将所有的接口抽取到一个api.js中，和request.js同一目录：

import request from './request'

export const GetHomeLists = () => request.get('/index/index')

在vue组件中，发起axios请求：

// 先引入api.js
import {GetHomeLists} from "@/request/api"

// 一般axios请求放在created钩子中
created(){
    GetHomeLists()
        .then(res=>{
            if(res.errno == 0){
                console.log(res.data)	// 成功拿到所有首页数据
            }
        })
}

附图：