應用在vue項目里的axios使用方法


1.首先要安裝axios,在你項目目錄下安裝axios。在命令行里輸入:npm install axios;

2.然后要在main.js的入口文件里引入以下代碼:



import axios from 'axios'
axios.defaults.baseURL = url;//這里寫上自己的基礎url,例如www.csdn.com
Vue.prototype.$axios = axios;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
import qs from 'qs';
Vue.prototype.qs = qs;

​在組件中使用axios請求數據。


mounted() {
// get請求
this.$axios({
method: "get",
url: url,// 這里填寫請求數據的路徑
params: {// 這里填寫請求數據的參數
user_id: 1,//這里如果設置了統一參數token,那么這里就不必再填寫user_id
...
}
})
.then(res => {
console.log(res)
}, err => {
console.log(err);
})

// post請求
this.$axios({
method: "post",
url: url,
data: this.qs.stringify({
user_id: 1,
...
})
})
.then(res => {
console.log(res)
}, err => {
console.log(err);
})
},

新增一個請求數據必須攜帶的參數token(這步是非必須的,按照自己的項目需求來),這個token表示的是用戶加密后的id;

//請求的攔截器
axios.interceptors.request.use(function (config) {
const token = token //設置統一參數,這個token的值要在cookie里面取
if(config.method === 'post') {
let data = qs.parse(config.data)

config.data = qs.stringify({
uid: uid,
...data
})
} else if(config.method === 'get') {
config.params = {
uid: uid,
...config.params
}
}
return config;
}, function (error) {
return Promise.reject(error);
})




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM