Vue之封装请求详解

一. 创建vue脚手架项目

二. 安装axios  

三. 封装请求

大致思路：

就是新建一个request的文件夹，里面有两个js文件，分别是request.js和 api.js 

前者是配置请求的根路径和拦截器，后者调用前者，将所有的请求都写在这个api.js里面，其他页面使用的时候直接按需导入这个文件，即可获取到对应的数据

1. 在src下面新建一个request的目录

request.js

2. 在request里面新建一个request.js  这是根域名配置和请求拦截器的js文件

    在request.js里面写：

2.1 --- 先导入 axios ：

   import axios from 'axios'

2.2 --- 再创建一个实例 ：

const instace = axios.create({
baseURL:'http://kumanxuan1.f3322.net:8001',   //请求根路径
timeout: 5000 , //请求超时时间
})

2.3 --- 再写两个拦截器

// 请求拦截器
instace.interceptors.request.use(config=>{
return config
},err=>{
return Promise.reject(err)  //返回错误
})

// 响应拦截器
instace.interceptors.response.use(res=>{
return res
},err=>{
return Promise.reject(err)  //返回错误
})

2.4 --- 最后因为别的文件要使用 所以要导出 导出的就是声明的那个实例instace

//导出这个请求文件
export default instace;

至此，request.js 这个文件配置完毕 

api.js

3. 然后再在request目录下新建一个api.js
3.1 --- 因为这个文件要使用 request.js  所以先导入这个js 

 import request from './request.js';

3.2 --- 然后，写页面的各个请求  例如 首页数据的请求 每一个const 就是一个请求

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

因为要按需导出 所以要const命名 因为要导出 所以要 export 命名等于一个箭头函数  这个箭头函数里面的 request就相当于axios 然后 点get  括号里面直接是 请求的路径 因为在request.js里面配置好了根域名

致此 首页的请求就写完并按需导出了 
此时，只是在api.js里面写好了请求，但我们需要的数据要在首页：使用这个首页的请求，来到home.vue, 在首页文件 home.vue里面按需导入

4. 使用这个请求

4.1 ---- 在首页的js下先按需导入 api.js
import { GetHomeData } from '../request/api.js'

注意，按需导入需要一个大括号，里面是自定义的这个请求的名字  GetHomeData 

4.2 ---- 然后在方法或者周期函数里面就可以使用 这个请求首页数据的方法GetHomeData（）这样导入以后 这个名字GetHomeData 就是一个请求首页数据的方法了 因为它本身就是一个箭头函数用的时候自然就是 方法的形式调用了 加小括号

到此，首页数据已经就显示了

这样封装后请求有参数的情况怎么写：
带参数的get请求：

api.js中：
get传参方式(params)是形参 固定的  后面的这个{params}是实参解构 页面使用这个请求的时候就要传入实参
export const GetsearchData = (params) => request.get('/list',{params})

调用的时候传入实参：

带参数的post请求（与get的区别是参数不需要解构，无大括号）：

调用时传入实参同上。

封装了这个有什么好处？

就是你的每一个请求都写在api.js里面，每一个请求就是一个方法。

你用到这个请求的时候，就导入这个方法，然后在需要的地方调用这个方法即可获取到数据。

最终api.js里面应该是这样的