溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue項(xiàng)目中axios使用詳解

發(fā)布時(shí)間：2020-09-04 15:02:26 來(lái)源：腳本之家 閱讀：181 作者：返回主頁(yè) 易墨 欄目：web開(kāi)發(fā)

axios在項(xiàng)目中(vue)的使用

沒(méi)有vue項(xiàng)目的使用vue-cli腳手架生成一個(gè)webpack模板的項(xiàng)目即可愉快的看下去了~

如果開(kāi)發(fā)遇到跨域問(wèn)題可以參考：https://www.jb51.net/article/134571.htm

安裝axios到項(xiàng)目中

npm install axios --save

配置wepack別名，不同環(huán)境訪問(wèn)不同的配置接口

配置：

vue項(xiàng)目中axios使用詳解

使用：import config from 'config'

封裝一個(gè)axios實(shí)例

新建fetch.js,在此創(chuàng)建axios實(shí)例與過(guò)濾器

若配置了代理。則config.apiBaseUrl則配置代理的前綴即可

import config from 'config'
import axios from 'axios'
// import qs from 'qs';

const instance = axios.create({
 baseURL: config.apiBaseUrl, // api的base_url
 timeout: 10000,    // 請(qǐng)求超時(shí)時(shí)間
 // transformRequest: data => qs.stringify(data) 
});
axios默認(rèn)提交格式為：application/json，轉(zhuǎn)換后提交格式為application/x-www-form-urlencoded
在asp.net core中，需要在action方法上添加[FromBody]接收json格式的數(shù)據(jù)，正常的都是application/x-www-form-urlencoded故有此修改。
按照使用需要安裝qs到項(xiàng)目中,可轉(zhuǎn)換數(shù)據(jù)格式類型
npm install qs --save

使用qs轉(zhuǎn)換請(qǐng)求對(duì)比圖

vue項(xiàng)目中axios使用詳解

給實(shí)例添加攔截器

// 添加請(qǐng)求攔截器
instance.interceptors.request.use(function (config) {
 // 在發(fā)送請(qǐng)求之前做些什么
 return config;
 }, function (error) {
 // 對(duì)請(qǐng)求錯(cuò)誤做些什么
 return Promise.reject(error);
 });

// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {
 // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
 return response;
}, function (error) {
 // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
 return Promise.reject(error);
});
 // 最后暴露實(shí)例
export default instance

實(shí)例的調(diào)用

若配置了express代理，請(qǐng)求路徑為：瀏覽器->express開(kāi)發(fā)服務(wù)器-----發(fā)送請(qǐng)求---->接口服務(wù)器

import fetch from 'fetch.js'
//get
fetch({
 url:'/home/data',//完整的請(qǐng)求路徑為fetch.js配置的baseURL+/home/data?pageIndex=1
 method:'GET',
 params:{pageIndex:1}
})
//post
fetch({
 baseURL:'/api/v1',//完整的請(qǐng)求路徑為/api/v1/home/save
 url:'/home/save',
 method:'POST',
 data:{id:1}
})

以上就是本次分享的關(guān)于vue項(xiàng)目中axios使用的全部?jī)?nèi)容，感謝你對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手