0 環境
系統環境：win10 前端編輯器：vscode 依賴：axios
1 axios安裝
1 方式1(命令操作)
// 安裝axios(創建的vue專案的根目錄)
npm install axios;
2 方式2(可視化界面操作)
?「快捷方式(win+r)」 --> 「cmd」 --> 「輸入vue ui」 --> 「自動會跳轉8000埠(默認)」
?
2 封裝axios
?可以配合全域攔截(請求攔截+回應攔截) 自行搜索
?
1 新建http.js
2 curd封裝
import axios from "axios";
import qs from "qs";
let baseURL = "http://127.0.0.1:8080/";
// let baseURL = "";
// const test = {} 替換 export default
export default {
post(url, data) {
return axios({
method: "post",
url: `${baseURL}${url}`,
data: qs.stringify(data),
timeout: 10000
});
},
put(url, data) {
return axios({
method: "put",
url: `${baseURL}${url}`,
data: qs.stringify(data),
timeout: 10000
});
},
delete(url, data) {
return axios({
method: "delete",
url: `${baseURL}${url}`,
// url,
data: qs.stringify(data),
timeout: 10000,
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
});
},
get(url, params) {
return axios({
method: "get",
url: `${baseURL}${url}`,
params: params, // get 請求時帶的引數
timeout: 10000
});
}
}
3 參考
1 區域參考
頁面參考
// 引入http.js
import http from '../utils/http'
abc(){
// 例如 md?articleId=1
var url = "后端路徑";
// 引數
var params = {
id: id,
key: value
}
// 比如在方法中呼叫get
http.get(url, params).then(resp => {
內容
})
}
2 全域參考(main.js)
?參考文章里最下面有
?
main.js
import api from '../utils/http' // 匯入api介面
Vue.prototype.$api = api; // 將api掛載到vue的原型上
具體頁面方法
this.$api.get()
// 若是不行 在http.js 將export default 替換為 const test = {}
this.$api.test.get()
3 全域參考(store中配置)
?只是為了學習一下store actions
?
store index.js
actions: {
get(_, params){
// var url = reqParams.url;
// var params = reqParams.params;
// console.log("url ==>",url);
console.log("params ==>",params);
return http.get(params.url, params.params);
},
async post(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return await http.post(url, params);
},
put(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return http.put(url, params);
},
delete(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return http.delete(url, params);
}
}
具體頁面
demo(id){
var url = "test/adc/";
var params = {
id: id
}
var data = {
url: url,
params: params
}
this.$store.dispatch("get", data).then(resp => {
console.log("resp -->", resp);
})
}
4 參考文章
參考文章
參考代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/229738.html
標籤：JavaScript
上一篇：零基礎怎么學習前端
下一篇：物件的淺拷貝與深拷貝（部分整理）