如何进行axios和request的封装

前言

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

一、如何在vue中引入axios？

    1、使用 cdn的线上地址:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

或

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    2、使用 npm:

npm install axios

二、如何封装axios？

//  在main.js中 挂载axios
import axios from 'axios'

    新建一个和components同级的文件夹 

    命名一个axios.js文件，编写以下内容：

// 对http请求进行封装
import axios from 'axios'
// 使用自定义的配置文件发送请求
const instance = axios.create({
    //  域名
    baseURL: '',
    //  最大响应等待时间
    timeout: 5000,
    //  请求头
    headers: {}
});
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
    // 在发送请求之前做些什么
    return config;
}, 
function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
    instance
    // 对响应数据做点什么
    if(response.status === 200){
        return response;
    }else{
        console.error("请求错误")
        console.error(response)
    }
    return response;
}, 
function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
export default instance

    之后，就可以将所有的ajax请求统一调用axios的http请求了，

//  比如在刚刚的api.js文件中

//  引入
import http from './axios'

//  导出请求api
export { getCi, addShoppingCart }

//  声明请求函数
function getCi(beginDate,endDate,keywords=''){
    let urlParams = new URLSearchParams()
    urlParams.append("beginDate",beginDate)
    urlParams.append("endDate",endDate)
    urlParams.append("keywords",keywords)
    return http.post('https://yuqing.shangyuninfo.com/api/data-visualization/analysis/statistic/wordCloud',urlParams)
}

//  如果配置了代理，可以直接简化请求地址
function addShoppingCart(goodsId,num){
    let urlParams = new URLSearchParams()
    urlParams.append("goodsId",goodsId)
    urlParams.append("num",num)
    //  '/shop'为代理地址的名称
    return http.post('/shop/api/shop/shopShoppingCart/site/add',urlParams)
}

    最后，就是使用了

<script>

    import { getCi } from "@/api/api";

    getCi(one,two).then(res => {
        console.log(res)
    })
</script>

三、封装request

首先，和pages同级创建一个文件夹，在此文件夹下创建request.ts文件

 

然后，在此文件夹内，书写这样的代码：

/* 请求 url  */
const BASE_URL: string = 'xxx'

//  声明一个class类叫做Request

class Request {
	//  直接定义get方法
	get(url,data) {
		return this.request(url,'GET',data)
	}
	//  直接定义post方法
	post(url,data) {
		return this.request(url,'POST',data)
	}
	request(url, method, data) {
		const header = {
			// 部分请求需要携带iToken
			"iToken": uni.getStorageSync("iToken"),
			// "openId": uni.getStorageSync("openId")
		};
		return new Promise((resolve, reject) => {
			uni.request({
				// 超时时间
				timeout: 10000,
				url: BASE_URL + url,
				method,
				data,
				header,
				success(res) {
					// console.log(res)
					// 成功的回调
					resolve(res)
				},
				fail(err) {
					// console.log(err)
					// 失败的回调
					reject(res)
				},
			})
		})
	}
}
const request = new Request()
export default request

 之后，就可以在请求时使用了，比如：

//  先引入
import request from './request'


export function getShop(type=''){
	return request.get(
        //  地址
        '/api/mchShop/appList',
        //  参数
        {
		    'searchDistance': '1000',
		    type
	    }
    )
}