1. New request.js

Create a new common file in the directory, and create a new request.js under the common file. The directory structure is as follows:
common/request.js
insert image description here

Write in request.js:

var baseUrl = 'http://localhost:9999' //基本路径

//接口封装
function request(datas) {
    
    
	//Promise 异步编程的一种解决方案
	var promise = new Promise((resolve, reject) => {
    
    
		uni.request({
    
    
			url: baseUrl + datas.url,
			data: datas.data || {
    
    },
			method: datas.method || 'GET',
			header: {
    
    
				'Authorization':'Bearer '+ datas.Authorization,  //token
				'content-type': datas.type ||
					'application/json;charset=UTF-8', //内容类型(默认 application/json;charset=UTF-8)
			},
			success: function(res) {
    
    
				resolve(res) 
			},
			fail: function(err) {
    
    
				console.log(err)
				reject(err)
			}
		})
	})
	return promise;
}
module.exports = request;

2. Introduce in main.js

import request from "common/request.js"//封装接口请求

Vue.prototype.requestfs=request  //封装接口请求

Note: requestfs in Vue.prototype.requestfs=request is used to call axios in future projects, please refer to the usage.

3. Using axios in practice

use template

Use the following code interface directly in the method, and fill in the actual interface path and parameters. Because the sentence
Vue.prototype.requestfs=request //encapsulation interface request was written during encapsulation , so this.requestfs can be used directly when calling axios.

this.requestfs({
    
    
	url: '',//填写请求路径
	data: '',//填写参数（看后端是什么传参方式）
	method: "POST", //填写请求，GET默认不写本行代码
	Authorization: this.token, //填写token （看接口请求是否需要传token）
}).then(res => {
    
    
	//if (res.data.msg == "success") {  //根据后端返回数据判断
		console.log("请求成功",res)
	//}
})

Use Cases

1. Take GET request as an example, the simplest request data rendering list

When encapsulating, the default is a GET request, so you only need to fill in the request path url in the method.
insert image description here

onShow() {
    
    
	this.getHot()
},
methods: {
    
    
	getHot() {
    
    
		this.requestfs({
    
    
			url: '/mall/goods/selectHotList?type=' + ''
		}).then(res => {
    
    
			if (res.data.msg == "success") {
    
    
				this.productsList = res.data.data
			}
		})
	},
}

2. Taking the GET request as an example, a token is required

insert image description here

onShow() {
    
    
	var bs = uni.getStorageSync('UserInformation')
	this.token = bs.usertoken
	this.getData()
},
methods: {
    
    
	getData() {
    
    
		this.requestfs({
    
    
			url: '/mall/customer/address/selectAddress',
			Authorization: this.token,
		}).then(res => {
    
    
			this.data = res.data.data
		})
	},
}

3. Take the POST request as an example, and need to pass parameters and token