如何对axios进行二次封装

为什么要封装axios：

有时候一个项目可能会有很多操作，比如测试环境的，生产环境的，他们的ip地址前缀都一样，这时候我们使用他们的时候只需要改后缀就行，非常方便。请求数据的时候也不用多次写代码，只需要改下自己所要获取数据的参数就行。

步骤：首先创建一个api文件夹专门用来封装Axios的，然后再在Api文件夹里再建一个文件夹存放baseURL的，也就是网址的域名（网址最前面那一段），然后还要再api文件夹中再创建一个文件夹用来存放后面那段网址。最后才能拼接成一段网址。

**参数resolve和reject的作用:****是将Promise中函数要传递的值，作为参数传给后面的then和catch中函数。

resolve（值1）把值1传给promise，然后再由promise把值1传给then（function（值1））；reject（值2）把值2给promise，然后再由promise把值2传给catch（function（值2））。

axios.create()：创建一个新的axios发请求。

存放baseURL文件夹中的js文件的代码：

get请求的代码：

import axios from "axios";

const instances=axios.create({
    baseURL:'http://poetry.apiopen.top',
    timeout:1000,
})

export default instances;

post请求的代码：

import axios from "axios";

const instance=axios.create({
    baseURL:'https://api.apiopen.top',
    timeout:1000,
    })
    //发送真正的网络请求
export default instance//相当于return Promise

首先导入axios，然后创建一个axios实例发请求，instance可以根据情况随便命名。

存放后面部分url文件夹中的js文件的代码：

get请求的代码：


import instances from "../../network/request";//导入刚刚创建的axios实例

export function userAPI(query) {
    return instances({
        url: '/poetry',
        method:'get',
        params: query
    })
}

post请求的代码：

    import instance from "../../network/request1";

export function userApipost(query1) {
    return instance({
        url:'/getJoke',
        method:'post',
        params:query1,
    })
}

首先导入baseURL里创建的axios实例，然后导出自己的配置函数。

query和query1就是用来接收数据的形参。

组件里发送请求的例子：可以写在钩子函数mounted里

get请求源代码：

import {userAPI} from "./api/name/nameAPI";//导入自己的在前面命名的函数
//get请求
userAPI({
        page:'1',
        count:'2'
      },)
              .then(res=>{
                console.log('get请求')
                console.log(res.data.result)
              })
              .catch(error=>{
                console.log(error)
              })

post请求的代码:

import {userApipost} from "./api/name/nameApIpost";
//post请求
       userApipost({
         type:'all',
         page:'0',
         count:'3'
       },)
               .then(res=>{
                 console.log('post请求')
                 console.log(res.data.result)
               })
               .catch(error=>{
                console.log(error)
               })