1.提高代码可读性
2.提高代码可维护性
3.减少代码书写
import axios from ‘axios‘ axios.defaults.baseURL = ‘http://127.0.0.1:8000‘ // 全局设置网络超时 axios.defaults.timeout = 10000; //设置请求头信息 axios.defaults.headers.post[‘Content-Type‘] = ‘application/json‘; axios.defaults.headers.put[‘Content-Type‘] = ‘application/json‘; axios.interceptors.request.use( config => { // 每次发送请求之前判断是否存在token,如果存在,统一在http请求的header都加上token,不用每次请求都手动添加 const token = localStorage.getItem(‘token‘) // console.log(token) if(token){ config.headers.Authorization = ‘JWT‘ + token } return config; }, error => { return Promise.error(error); }) axios.interceptors.response.use( //请求成功 // res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res), res => { if(res){ //加上201是因为modelviewset的post请求成功的状态码是201 if(res.status === 200 || res.status === 201){ return Promise.resolve(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:8888/‘ }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); } } ) //封装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) }) } ) } //封装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) }) } ) } //封装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) }) } ) } //封装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) }) } ) } //?定要导出函数 export default axios;
//将我们http.js中封装好的 get,post.put,delete 导过来 import {axios_get,axios_delete,axios_post,axios_put} from ‘./http.js‘ export const user_add = p => axios_post("/app02/user/", p) // 获取七?云token
<script> // 导入axios函数 import {user_add} from ‘../api/api‘ export default { data(){ return{ username:‘‘, age:‘‘, home:‘‘, hight:‘‘, roles:‘‘, classrooms:‘‘, } }, methods:{ add(username){ let data={ "username":this.username, "age":this.age, "home":this.home, "hight":this.hight, "roles":[this.roles], "classrooms":this.classrooms } //直接使用导入的axios函数 user_add(data).then(res=>{ console.log(res) if(res.code==200){ alert(‘添加成功‘) sessionStorage.setItem("username",username) this.$router.push({path:‘/userdel‘}) }else { alert(‘添加失败‘) } }).catch(error=>{ console.log(error) }) } }, } </script>