axios を使用して uniapp ネットワーク リクエストをカプセル化します (リクエストのインターセプトとリクエストの応答)。

1. まず、axios を構成する必要があるプロジェクトのルート ディレクトリを開き、次にこのプロジェクトの場所で HBuilderX ターミナルを開いて axios をダウンロードします (図を参照)。

ターミナル ウィンドウの名前: npm install axios

2. ルート ディレクトリにフォルダーを作成し、ネットワーク リクエストをカプセル化するファイルを保存します (またはファイルを直接作成します)。プロジェクト ファイルは utils フォルダーにあります (図を参照)。

3. axios の公式 Web サイト (Axios 使用法アドレス:基本的な使用例 | Axios 中国語ドキュメント | Axios 中国語 Web サイト)に従ってリクエスト インターセプトとリクエスト レスポンス インターセプトを設定します。具体的なコードは次のとおりです。

import Vue from 'vue'   //需要先引入vue
import axios from 'axios'  //引入axios
const service = axios.create({
// url = base url + request url
	baseURL: 'http://yqdh.test.site.ximengnaikang.com/pap/api', 
	timeout: 6000, // request timeout
	crossDomain: true  //允许跨域
})
// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
	config => {
	  if (uni.getStorageSync('login_token')) {
		 // 给请求头添加user-token 这块看你使用什么方式存储，需要确定是否有其他关键字
		 config.headers["Authorization"] = `Bearer ${uni.getStorageSync('login_token')}`;
	   }
		console.log('此时请求拦截成功')
		return config;
	},
	error => {
		console.log(error); // for debug
		return Promise.reject(error);
	}
);

//配置成功后的拦截器
service.interceptors.response.use(res => {
//此处一定要打印，因为不同后端给的接口数据格式可能不一样
	console.log(res,'相应拦截了')
	if (res.status == 200) {
		console.log('相应拦截了200')
		return res.data
	} else {
		console.log('相应拦截了非200')
		return Promise.reject(res.data.msg);
	}
}, error => {
	console.log('相应拦截了直接错误')
	if (error.response.status) {
		switch (error.response.status) {
			case 401:
				break;
			default:
				break;
		}
	}
	return Promise.reject(error)
})
export default service

4. 上記の設定が完了したら、main.js でグローバルにハングする必要があります (呼び出すと便利)

 5. ページの利用（リクエストの取得）

 6. ページの使用（リクエストの投稿）