Vue与axios 请求封装和使用

1. Vue的封装

1.1 封装的意义

• 提高了代码的可读性
• 提高了代码的可维护性
• 减少了代码的书写

1.2 封装

// src/api/http.js

import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000/"
// axios.defaults.baseURL = "http://172.16.240.175/: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);
             }
       });

// 封装xiaos请求

// 封装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; //⼀定要导出函数

1.3 使⽤

// src/api/http.js


//将我们http.js中封装好的 get,post.put,delete 导过来
import { axios_get, axios_post, axios_delete, axios_put } from './http.js'

export const qn_token_get = p => axios_get("/oauth/qntoken/", p) // 获取七⽜云
token
export const section_add = p => axios_post("/course/section/", p) // 获取七⽜云
token


// src/components/qiniu.vue

<script>
//导⼊axios函数 
import {qn_token_get,section_add} from './axios_api/api'

methods: {
       changeFile(e){
       // 获取⽂件
         this.file = e.target.files[0];
       },
       gettoken(){
             //直接使⽤导⼊的axios函数
             qn_token_get().then(res=>{
 
                return this.token = res.data.uptoken
                console.log(this.token)
             })
       },
}
</script>