Vue封装axios请求

为了方便调用api接口，我们封装axios请求

1、在vue项目的src目录下创建api文件夹

并在api文件夹中创建两个两个js文件(http.js、api.js)

http.js文件中写入:

import axios from 'axios'
axios.defaults.baseURL="http://127.0.0.1:8000/"
axios.defaults.timeout = 1000000;
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 = sessionStorage.getItem("jwt_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),

   // 请求失败
   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);
       }
   });

// 封装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)
           })
       }
   )
}

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)
           })
       }
   )
}

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)
           })
       }
   )
}

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)
           })
       }
   )
}

api.js路面写入:

import {axios_get,axios_post,axios_delete,axios_put} from './http.js'

export const login_post = p  => axios_post("/myapp/index/",p)  //定义路由,post请求

export const login_get = p  => axios_get("/myapp/index/",p)  //定义路由,get请求

2、在components文件中创建index.vue

3、在index.vue中写入代码(post请求)

4、在index.vue中写入代码(get请求)

*** 注:get请求和post请求方式参数不同（前者是params后者是data）**

5、在router文件下的index.js中注册路由

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'

Vue.use(Router)

var routes = [
    {
         path:'/',
         name:'index',
         component:index,
       },
]

export default new Router({
 routes:routes,
 mode:'history'   /*hash*/
})

6、启动vue项目就可以了

npm run dev