uniapp引入axios異步框架的完整步驟
引言
在學(xué)習(xí)uniapp的過程中，發(fā)現(xiàn)uniapp框架默認(rèn)集成request請求框架存在問題，發(fā)送請求時在header中塞入token值，而后臺接收不到，也就是說uniapp默認(rèn)的request請求框架，不支持在請求頭中放入token的做法。
基于以上原因，筆者確定放棄默認(rèn)的請求框架，引入第三方axios請求框架。
那么該怎么說呢？默認(rèn)三步驟：一引入，二配置，三測試
第一步、引入axios組件
這里筆者使用的npm工具安裝axios組件，同時指定版本，如果不指定版本默認(rèn)會安裝最新版本，最新版本的axios組件在真機(jī)測試階段會出現(xiàn)請求不適配的問題，這里先按下不談，后續(xù)文章會說明情況。
npm i axios@0.27.2
第二步、創(chuàng)建并配置axios.js
注意：一定要配置axios.defaults.adapter 來適配uniapp框架。
同時在請求和響應(yīng)攔截中，對token進(jìn)行設(shè)置和獲取操作，在前后端分離的項目中以token作為用戶請求后臺的唯一合法依據(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,
})
// 請求攔截
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) {
// 請求成功后設(shè)置token
if (res.data.code == 100) {
uni.setStorageSync('token', res.header["token"]);
}
return res.data;
} else {
return Promise.reject(res.data.msg);
}
});
// 自定義適配器 ， 適配uniapp語法
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
同時別忘了將配置的axios.js文件引入到main.js中配置main.js。由于筆者在uniapp中使用的Vue2.x版本，所以以下main.js內(nèi)寫法與Vue3.x的寫法不同，請讀者注意粘貼。
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組件的工作就完成了，那么下面就開始測試，是否可以正常訪問了。
第三步、測試是否配置成功
1、由于由于跨域問題，于是筆者在后臺的接口類上配置跨域注解。
CrossOrigin: 該注解用于標(biāo)注該接口可被跨域訪問?？赡茏x者會想為什么不在前端配置代理來實現(xiàn)跨域呢？當(dāng)前為了測試組件是否引入成功，所以一切從簡，以測試結(jié)果為主。前端配置代理實現(xiàn)跨域請繼續(xù)閱讀下文。
@CrossOrigin
@RestController
public class MembersController {
@Resource
private MembersService membersService;
/**
* 登錄賬號
* @param param 賬號和密碼
* @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;
/**
* 登錄賬號
* @param param 賬號和密碼
* @return 返回 Ret
*/
public Ret login(LoginBo param) {
// 1、驗參
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("密碼填寫錯誤！").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頁面
這個$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)
});
},
},
測試結(jié)果如下：
輸入錯誤的賬號和密碼，請求狀態(tài) 200,表示請求成功的意思，也就是表示axios組件引入成功了。
第四步、如何配置前端的代理來實現(xiàn)跨域呢？
這里需要用到manifest.json文件，點擊該文件并選擇源碼視圖
并在其中配置以下信息
"h5": {
"devServer": {
"hot": true,
"port": 8080,
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "http://127.0.0.1:7777/",
"changeOrigin": true,
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
}
}
同時修改axios.js文件
const service = axios.create({
baseURL: "/api",
timeout: 6000
})
這時就可以刪除后臺接口上的 @CrossOrigin注解了。
下面測試結(jié)果如下：
測試成功，這樣就實現(xiàn)了通過前端配置代理來解決跨域問題，同時這樣服務(wù)器會更安全一些，避免被其他的前臺所訪問。以上是筆者在學(xué)習(xí)uniapp整合axios過程中的一些總結(jié)，希望可以對各位讀者有所幫助。
總結(jié)
到此這篇關(guān)于uniapp引入axios異步框架的文章就介紹到這了,更多相關(guān)uniapp引入axios異步框架內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Javascript編程中幾種繼承方式比較分析,較為詳細(xì)的分析了JavaScript繼承的原理并對比分析了幾種繼承方式的實現(xiàn)技巧,需要的朋友可以參考下2015-11-11
判斷是否為空對象在實際開發(fā)中很常見,下面這篇文章主要給大家介紹了關(guān)于JS判斷對象是否為空對象的幾種實用方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
JavaScript函數(shù)節(jié)流和函數(shù)防抖之間的區(qū)別
本文主要介紹了JavaScript函數(shù)節(jié)流和函數(shù)防抖之間的區(qū)別。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
TypeScript使用vscode監(jiān)視代碼編譯的過程
這篇文章主要介紹了TypeScript使用vscode監(jiān)視代碼編譯,使用tsc 文件名稱可以將ts文件轉(zhuǎn)化為js文件，js文件可以引入在html文件中直接使用，需要的朋友可以參考下2021-12-12
一文詳解如何通過JavaScript動態(tài)修改元素的樣式
這篇文章主要介紹了如何通過JavaScript動態(tài)修改元素的樣式,三種方式分別是直接操作元素的style屬性、通過classList屬性添加或移除類名、以及使用CSSStyleDeclaration對象的setProperty方法,每種方法都有其適用場景,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細(xì)介紹了Bootstrap table右鍵功能的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
在頁面中的鏈接除了常規(guī)的方式以外,如果使用javascript,還有很多種方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript常見打開鏈接的幾種方法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了js A*尋路算法原理與具體實現(xiàn)過程,結(jié)合實例形式詳細(xì)分析了A*尋路算法的具體概念、原理、實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
EditPlus中的正則表達(dá)式 實戰(zhàn)(4)
這篇文章主要介紹了 EditPlus中的正則表達(dá)式 實戰(zhàn)(4)的相關(guān)資料,需要的朋友可以參考下2016-12-12
本文主要介紹了小程序?qū)崿F(xiàn)Token生成與驗證，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12