axios的封装和使用

后端DRF：
如果页面报这个错：
Access- control - allow- origin
settings.py：

  CORS_ALLOW_CREDENTIALS = True

  CORS_ORIGIN_ALLOW_ALL = True

  APPEND_SLASH=False

（我第一次做深有体会，可以直接复制代码）

前段vue：

先在src目录下创建一个文件夹request。（名字自己定义就好）
然后在啊request下创建一个http.js和api.js。

api.js存放接口，然后传递到http.js。
http.js接收到接口完善一下其他的步骤，然后在传给后端。

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){
              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 if(error.response.status === 403){
                  alert("权限不够")
              }   
              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)
                  })
          }
      )
  }

api.js：

  // 先把http.js导入进来：
  import {axios_get} from './http.js'

  // 然后写接口的路径
  export const zzx_get = p => axios_get('/a1/user/', p)  //zzx_get 是我自己定义的

在写一个vue文件
不用在导入axios，直接导入api.sj自己定义的接口就好。
然后运行zzx_get就OK了

最后给vue文件配置一个路由。