uni-app中封裝axios請求

安裝

安裝axios

npm install axios --save

安裝qs

npm install qs --save

配置

1. 在src/下新建一個utils/request.js

import axios from "axios"
import qs from "qs"
import Vue from "vue"

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post["Content-Type"] =
// "application/x-www-form-urlencoded;charset=UTF-8";

const service = axios.create({
	withCredentials: true,
	crossDomain: true,
	baseURL: Vue.prototype.baseURL, //這個baseURL是我在main.js下配置的請求url
	timeout: 6000
})

// request攔截器,在請求之前做一些處理
service.interceptors.request.use(
	config => {
		// if (store.state.token) {
		//     // 給請求頭添加user-token
		//     config.headers["user-token"] = store.state.token;
		// }
		config.method === 'post' ?
			config.data = qs.stringify({ ...config.data
			}) :
			config.params = { ...config.params
			};
		console.log('請求攔截成功')
		return config;
	},
	error => {
		console.log(error); // for debug
		return Promise.reject(error);
	}
);

//配置成功后的攔截器
service.interceptors.response.use(res => {
	if (res.data.status == 200) {
		return res.data
	} else {
		return Promise.reject(res.data.msg);
	}
}, error => {
	return Promise.reject(error)
})

axios.defaults.adapter = function(config) { //自己定義個適配器，用來適配uniapp的語法
	return new Promise((resolve, reject) => {
		// console.log(config)
		var settle = require('axios/lib/core/settle');
		var buildURL = require('axios/lib/helpers/buildURL');
		uni.request({
			method: config.method.toUpperCase(),
			url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
			header: config.headers,
			data: config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				console.log("執行完成：", response)
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};
				settle(resolve, reject, response);
			}
		})
	})
}
export default service

2. 在src/下新建一個api/user.js，當作各種請求匯總文件夾

//引入剛才創建的request.js
import request from '@/utils/request' 

//GTE 傳參需要用 params
//POST 傳參需要用 data

export function getMsg() {
	return request({
		url: '/homepage/vertical',
		method: 'get'
	})
}

3. 可以結合Vuex在store/actions下使用，也可以直接使用，下面演示直接在pages/index/index.vue使用

<template>
	<view>
	</view>
</template>

<script>
    //引入函數
    import { getMsg } from '@/api/user'
    export default {
        data() {
            return {

            }
        },
        onLoad() {
            getMsg().then(res => {
                console.log("請求res內容",res);
            })
            .catch(err => {
                console.log("請求err內容",err)
            })
        }
    }
</script>

<style>
</style>

結果顯示：請求到了內容，說明調通了