uniapp引入axios異步框架的完整步驟

更新時(shí)間：2023年12月08日 10:18:26 作者：吳明_yst

雖然Uniapp可以使用Vue.js自帶的$http,但也可以使用Axios,只需要在項(xiàng)目中進(jìn)行簡(jiǎn)單的配置,這篇文章主要給大家介紹了關(guān)于uniapp引入axios異步框架的相關(guān)資料,需要的朋友可以參考下

引言

在學(xué)習(xí)uniapp的過(guò)程中，發(fā)現(xiàn)uniapp框架默認(rèn)集成request請(qǐng)求框架存在問(wèn)題，發(fā)送請(qǐng)求時(shí)在header中塞入token值，而后臺(tái)接收不到，也就是說(shuō)uniapp默認(rèn)的request請(qǐng)求框架，不支持在請(qǐng)求頭中放入token的做法。

基于以上原因，筆者確定放棄默認(rèn)的請(qǐng)求框架，引入第三方axios請(qǐng)求框架。

那么該怎么說(shuō)呢？默認(rèn)三步驟：一引入，二配置，三測(cè)試

第一步、引入axios組件

這里筆者使用的npm工具安裝axios組件，同時(shí)指定版本，如果不指定版本默認(rèn)會(huì)安裝最新版本，最新版本的axios組件在真機(jī)測(cè)試階段會(huì)出現(xiàn)請(qǐng)求不適配的問(wèn)題，這里先按下不談，后續(xù)文章會(huì)說(shuō)明情況。

npm i axios@0.27.2

第二步、創(chuàng)建并配置axios.js

注意：一定要配置axios.defaults.adapter 來(lái)適配uniapp框架。
同時(shí)在請(qǐng)求和響應(yīng)攔截中，對(duì)token進(jìn)行設(shè)置和獲取操作，在前后端分離的項(xiàng)目中以token作為用戶請(qǐng)求后臺(tái)的唯一合法依據(jù)。

import Vue from 'vue'
import axios from 'axios'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';

const service = axios.create({
	baseURL: "http://127.0.0.1:7777/",
	timeout: 6000,
})

// 請(qǐng)求攔截
service.interceptors.request.use(config => {
		// 非登錄接口添加token
		if (config["url"].indexOf("login") < 0) {
			config.headers['token'] = uni.getStorageSync('token');
		}
		return config;
	},
	error => {
		return Promise.reject(error);
	});

// 響應(yīng)攔截
service.interceptors.response.use(res => {
	if (res.status == 200) {
		// 請(qǐng)求成功后設(shè)置token
		if (res.data.code == 100) {
			uni.setStorageSync('token', res.header["token"]);
		}
		return res.data;
	} else {
		return Promise.reject(res.data.msg);
	}
});


// 自定義適配器 ， 適配uniapp語(yǔ)法
axios.defaults.adapter = function(config) {
	return new Promise((resolve, reject) => {
		let settle = require('axios/lib/core/settle');
		let buildURL = require('axios/lib/helpers/buildURL');
		let buildFullPath = require('axios/lib/core/buildFullPath');
		let fullurl = buildFullPath(config.baseURL, config.url);
		uni.request({
			method: config.method.toUpperCase(),
			url: buildURL(fullurl, config.params, config.paramsSerializer),
			header: config.headers,
			data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};
				settle(resolve, reject, response);
			},
		});
	})
}
export default service

同時(shí)別忘了將配置的axios.js文件引入到main.js中配置main.js。由于筆者在uniapp中使用的Vue2.x版本，所以以下main.js內(nèi)寫法與Vue3.x的寫法不同，請(qǐng)讀者注意粘貼。

import Vue from 'vue'
import App from './App'
import uView from "uview-ui";
import axios from './common/axios/axios.js'

Vue.config.productionTip = false

Vue.use(uView);
Vue.prototype.$api = axios

App.mpType = 'app'
const app = new Vue({
	...App
})

app.$mount()

完成以上工作，uniapp引入axios組件的工作就完成了，那么下面就開(kāi)始測(cè)試，是否可以正常訪問(wèn)了。

第三步、測(cè)試是否配置成功

1、由于由于跨域問(wèn)題，于是筆者在后臺(tái)的接口類上配置跨域注解。

CrossOrigin: 該注解用于標(biāo)注該接口可被跨域訪問(wèn)。可能讀者會(huì)想為什么不在前端配置代理來(lái)實(shí)現(xiàn)跨域呢？當(dāng)前為了測(cè)試組件是否引入成功，所以一切從簡(jiǎn)，以測(cè)試結(jié)果為主。前端配置代理實(shí)現(xiàn)跨域請(qǐng)繼續(xù)閱讀下文。

@CrossOrigin
@RestController
public class MembersController {
    @Resource
    private MembersService membersService;
    /**
     * 登錄賬號(hào)
     * @param param 賬號(hào)和密碼
     * @return 返回 Ret
     */
    @PostMapping("/login")
    public Ret login(@RequestBody LoginBo param){
        return membersService.login(param);
    }
}

邏輯處理中心：

@Service
public class MembersService extends ServiceImpl<MembersMapper, Members> implements IService<Members> {
    @Resource
    private MembersMapper membersMapper;
    /**
     * 登錄賬號(hào)
     * @param param 賬號(hào)和密碼
     * @return 返回 Ret
     */
    public Ret login(LoginBo param) {
        // 1、驗(yàn)參
        String account = param.getAccount();
        // 2、查詢結(jié)果并判斷
        QueryWrapper<Members> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("account", account);
        Members members = membersMapper.selectOne(queryWrapper);
        if ( members == null ) {
            return Ret.builder().code(300).msg("登錄失?。?).build();
        } else if ( !Objects.equals(param.getPassword(), members.getPassword()) ) {
            return Ret.builder().code(300).msg("密碼填寫錯(cuò)誤！").build();
        }
        // 3、封裝返回登錄成功日志信息
        LoginVo loginVo = LoginVo.builder()
                .account(account)
                .avatar(members.getAvatar())
                .token(account)
                .nickName(members.getNickName())
                .build();
        return Ret.builder().code(100).data(loginVo).build();
    }
}

uniapp中的login.vue頁(yè)面

這個(gè)$api 是否眼熟，是的就是在main.js中配置的全局別名。

methods: {
	login() {
		let data = {
			...this.form
		}
		this.$api({
			method: 'post',
			url: '/login',
			data: data
		}).then(res => {
			if (res.code == 100) {
				// 存入本次緩存中
				uni.setStorageSync('userInfo', res.data);
				this.$u.toast('登錄成功');
				uni.navigateBack();
			} else {
				this.$u.toast(res.msg);
			}
		}).catch(err => {
			console.log(err)
		});
	},
},

測(cè)試結(jié)果如下：

輸入錯(cuò)誤的賬號(hào)和密碼，請(qǐng)求狀態(tài) 200,表示請(qǐng)求成功的意思，也就是表示axios組件引入成功了。

第四步、如何配置前端的代理來(lái)實(shí)現(xiàn)跨域呢？

這里需要用到manifest.json文件，點(diǎn)擊該文件并選擇源碼視圖

并在其中配置以下信息

"h5": {
	"devServer": {
		"hot": true,
		"port": 8080,
		"disableHostCheck": true,
		"proxy": {
			"/api": {
				"target": "http://127.0.0.1:7777/",
				"changeOrigin": true,
				"secure": false,
				"pathRewrite": {
					"^/api": ""
				}
			}
		}
	}
}

同時(shí)修改axios.js文件

const service = axios.create({
	baseURL: "/api",
	timeout: 6000
})

這時(shí)就可以刪除后臺(tái)接口上的 @CrossOrigin注解了。

下面測(cè)試結(jié)果如下：

測(cè)試成功，這樣就實(shí)現(xiàn)了通過(guò)前端配置代理來(lái)解決跨域問(wèn)題，同時(shí)這樣服務(wù)器會(huì)更安全一些，避免被其他的前臺(tái)所訪問(wèn)。以上是筆者在學(xué)習(xí)uniapp整合axios過(guò)程中的一些總結(jié)，希望可以對(duì)各位讀者有所幫助。