axios封装与使用

我不知道为啥，可能是脑抽了，本来在研究Vuex的，然后跑题了，莫名其妙的转到了封装axios了，封装就封装吧

一、创建一个叫axios的文件

import axios from 'axios'
import { Toast } from 'mint-ui' //自己习惯用什么UI框架就用哪个
// import { getCookie } from './cookie'  //cookie缓存js，下面会有代码
// import store from '../src/store/store' //Vuex 本来是用来加token的，然后发现我只是自己测试研究，并不需要登录，我就给注释了

var service = axios.create({
  baseURL: 'https://unidemo.dcloud.net.cn', //接口网址，网址复制就复制吧，反正我也是在网上找的
  timeout: 5000 //请求超时时间
})
// 请求添加拦截器
service.interceptors.request.use(function (config) {
  console.log("添加拦截器1",config)
  // console.log("添加拦截器2",store.getters.token)
  // if (!store.getters.token) {
  //   console.log("是否进入")
  //   config.headers['Token'] = getCookie('TOKEN')
  // }
  return config;
}, function (error) {
  return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.request.use(function (request) {
  console.log("响应拦截器",request)
  return request
}, function (error) {
  console.log("err:" + error)
  Toast({
    message: '网络错误',
    position: 'middle',
    duration: 2000
  })
  return Promise.reject(error)
})

export default {
  // get请求
  get(url, data) {
    console.log(data)
    return new Promise((resolve, reject) => {
      service({
        method: 'GET',
        url,
        params: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.log(err, '异常')
      })
    })
  },

  post(url, data) {
    return new Promise((resolve, reject) => {
      service({
        method: 'POST',
        url,
        data: data
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        console.log(err, '异常')
      })
    })
  }
}

请求大概就这些吧，下面就是一些其他的js文件里面的代码

二、cookie.js

//获取cookie、
export function getCookie(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg)) {
    return (arr[2]);
  }
  else {
    return null;
  }
}

//设置cookie,增加到vue实例方便全局调用
export function setCookie(c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};

//删除cookie
export function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) {
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  }
};

三、api.js也就是使用我封装好的请求方式

import req from './axios'

const getNews=(data)=>{
  return req.get('/api/news',data)
}

export{getNews}

四、最后，在页面中使用

var data = {
	p: 1
 }
getNews(data).then((res) => {
  console.log(res)
  console.log(res.data[0].author_avatar)
})

五、没了