目錄
參考掘金：https://juejin.im/post/6844903652881072141#heading-8
1.初始化Vue項目
參考博客 ：https://www.cnblogs.com/xiaonq/p/11027880.html
#使用腳手架創建vue項目 deaxios是項目名，隨便取
vue init webpack deaxios
cd deaxios #進入項目
npm install axios -S #安裝 axios
2.Vue之封裝axios
可以參考大佬博客：
https://blog.csdn.net/qq_40128367/article/details/82735310
https://www.cnblogs.com/xiaonq/p/11027880.html
安裝
npm install axios --save
為什么要封裝axios
- axios的封裝和api接口的統一管理，其實主要目的就是在幫助我們簡化代碼和利於后期的更新維護。
引入
一般我會在項目的components目錄中，新建一個axios_api文件夾，然后在里面新建一個http.js和一個api.js文件。http.js文件用來封裝我們的axios，api.js用來統一管理我們的接口。
在http.js頁面添加：
1.環境的切換
- 我們的項目環境可能有開發環境、測試環境和生產環境。我們通過node的環境變量來匹配我們的默認的接口url前綴。axios.defaults.baseURL可以設置axios的默認請求地址就不多說了。
import axios from 'axios'
// 環境的切換
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://192.168.56.100:8888/' // 開發環境
} else if (process.env.NODE_ENV === 'debug') {
axios.defaults.baseURL = '' // 調試環境
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = '' // 生產環境
}
axios.defaults.withCredentials = true
//跨域訪問需要發送cookie時一定要加axios.defaults.withCredentials = true
2.設置請求超時
- 通過axios.defaults.timeout設置默認的請求超時時間。例如超過了10s，就會告知用戶當前請求超時，請刷新等
axios.defaults.timeout = 1000000;
3.post/put請求頭的設置
-
請求頭設置
application/x-www-form-urlencoded;charset=UTF-8或application/json -
post/put請求的時候，我們需要加上一個請求頭，所以可以在這里進行一個默認的設置，即設置post的請求頭為
application/json
/*
設置請求傳遞數據的格式(看服務器要求的格式)
x-www-form-urlencoded
默認提交表單
把數據對象序列化成表單數據
*/
// axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded';
// axios.defaults.transformRequest =data=>qs.stringify(data);
/*
設置默認提交json
把數據對象序列化成json字符串
*/
//axios.defaults.headers['Content-Type'] = 'application/json'; //設置默認提交json
//axios.defaults.transformRequest = data => JSON.stringify(data) //把數據對象序列化成json字符串
axios.defaults.headers.post['Content-Type'] =' application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';
4.請求攔截
/*
請求攔截器：發送請求前需要調用這個函數
1.當沒有登錄時，直接跳轉到登錄頁
2.請求發送前把token獲取 設置到header中
*/
axios.interceptors.request.use(
config => {
// 每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
const token = sessionStorage.getItem("jwt_token");
console.log(token);
if (token){
config.headers.Authorization = 'JWT '+ token
}
return config;
},
error => {
return Promise.error(error);
});
5.響應攔截
axios.interceptors.response.use(
// 請求成功
res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
// 請求失敗
error => {
if (error.response) {
// 判斷一下返回結果的status == 401？ ==401跳轉登錄頁面。 ！=401passs
console.log(error.response);
if(error.response.status===401){
// 跳轉不可以使用this.$router.push方法、
// this.$router.push({path:'/login'})
window.location.href="http://127.0.0.1:8080/#/login"
}else{
// errorHandle(response.status, response.data.message);
return Promise.reject(error.response);
}
// 請求已發出，但是不在2xx的范圍
} else {
// 處理斷網的情況
// eg:請求超時或斷網時，更新state的network狀態
// network狀態在app.vue中控制着一個全局的斷網提示組件的顯示隱藏
// 關於斷網組件中的刷新重新獲取數據，會在斷網組件中說明
// store.commit('changeNetwork', false);
return Promise.reject(error.response);
}
});
6.封裝get post put delete方法
// 封裝xiaos請求 封裝axios里的get
export function axios_get(url,params){
return new Promise(
(resolve,reject)=>{
axios.get(url,{params:params})
.then(res=>{
console.log("封裝信息的的res",res);
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
}
// 封裝xiaos請求 封裝axios里的post
export function axios_post(url,data){
return new Promise(
(resolve,reject)=>{
console.log(data);
axios.post(url,JSON.stringify(data))
.then(res=>{
console.log("封裝信息的的res",res);
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
}
// 封裝xiaos請求 封裝axios里的put
export function axios_put(url,data){
return new Promise(
(resolve,reject)=>{
console.log(data);
axios.put(url,JSON.stringify(data))
.then(res=>{
console.log("封裝信息的的res",res);
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
}
// 封裝xiaos請求 封裝axios里的delete
export function axios_delete(url,data){
return new Promise(
(resolve,reject)=>{
console.log(data);
axios.delete(url,{params:data})
.then(res=>{
console.log("封裝信息的的res",res);
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
}
)
}
總結：
axios.get()方法和axios.post()在提交數據時參數的書寫方式還是有區別的。區別就是，get的第二個參數是一個{}，然后這個對象的params屬性值是一個參數對象的。而post的第二個參數就是一個參數對象。兩者略微的區別要留意哦！
api.js頁面
//將我們http.js中封裝好的 get,post.put,delete 導過來
import {axios_get, axios_post, axios_delete, axios_put} from './http.js'
//按照格式確定方法名
export const user_get = p => axios_get("/user/user/", p);
export const add_post1 = p => axios_post("/user/user/", p);
//向后端傳輸要修改數據的id
export const user_updatad = p => axios_put("/user/user/?id="+p.id, p);
export const del = p => axios_delete("/user/user/", p );
應用到組件
<template>
<div>
<h1>查詢數據</h1>
<a>
<button @click="add_post">點擊添加</button>
</a>
<div v-for="i in list">
<p>姓名：{{i.name}}
<!--<router-link :to="{'path':'/updated/','query':{'id':i.id}}">點擊修改</router-link>-->
<!--<router-link :to="{'path':'/del/','query':{'id':i.id}}">刪除</router-link>-->
<a>
<button @click="created(i.id)">修改</button>
</a>
<a>
<button @click="user_del(i.id)">刪除</button>
</a>
</p>
<p>年齡：{{i.age}}</p>
<p>家鄉：{{i.home}}</p>
<div style="border:1px solid #CCC"></div>
</div>
</div>
</template>
<script>
import {user_get,del} from '../axios_api/api';
export default {
name: "Get",
data() {
return {
list: [],
id: '',
}
},
methods: {
//查詢數據
get_data(){
user_get().then(resp => {
this.list = resp;
console.log(resp)
});
},
//點擊跳轉添加頁面
add_post() {
this.$router.push('/post')
},
//點擊跳轉修改頁面
created(id) {
this.$router.push({path: "/updated?id=" + id})
},
//刪除
user_del(id){
del({id:id}) .then(resp => {
console.log(resp);
if (resp.code == '200') {
alert('刪除成功!!!')
} else {
alert('刪除失敗---')
}
}).catch(error => {
console.log(error)
})
},
},
//初始化頁面后就會執行這個函數
mounted: function () {
this.get_data()
},
created() {}
}
</script>
<style scoped>
</style>