vue 使用axios封装

自己封装axios

axios 是一个基于 Promise 的http请求库, 它支持浏览器和node.js以及promise，能拦截请求和响应，也能取消请求，而且可以自动转换JSON数据，浏览器端支持防止CSRF(跨站请求伪造)等等。

1.安装

npm install axios; // 安装axios

• 下面是我总结的常用的一个axios.js文件的封装，注释部分需要结合自身实际情况修改
  1、baseURL
  2、请求拦截器，例如请求的时候在头部加上请求的token
  3、响应拦截器，例如判断状态，过期清除token

import axios from 'axios';

//  让请求在浏览器中允许跨域携带cookie
axios.defaults.withCredentials = true;

// 使用自定义配置新建一个 axios 实例
const service= axios.create({
   // 基础的请求地址
    baseURL: 'https://some-domain.com/api/',
   // 设置超时时间 5s
    timeout: 5000
});

// 添加超时后的处理（axios中需要你根据error信息来进行判断）
axios().catch(error => {
  const { message } = error;
  if (error.code === 'ECONNABORTED' && message.indexOf('timeout')> -1){
    // 超时处理，可以直接弹出错误或者重新发起一次请求
    alert("请求超时！请检查网络问题")；
        //  let newHttp= new Promise(function (resolve){
        //      resolve()
        //  })
            //  newHttp实例执行完成后会再次执行
            //  返回一个promise实例，同时重新发起请求，config请求配置，包扩请求头和请求参数
        //  return newHttp.then(function (){
        //      return  axios.create({baseURL: 'https://some-domain.com/api/',timeout: 5000});
        //  })

  }
    // 若不是超时,则返回未错误信息
    return Promise.reject(error);
})

// 请求拦截器，例如请求的时候在头部加上请求的token
service.interceptors.request.use(config => {

   //  if (localStorage.getItem('token')) {

   //     config.headers.ACCESS_TOKEN = localStorage.getItem('token');

  //  }

    return config;  //  有且必须有一个config对象被返回

}, error => {
   //   对请求错误做些什么
    console.log(error);
    return Promise.reject();
});


// 响应拦截器,例如判断服务器返回的状态，400，500啥的，其实超时可以写到这里面来，我分开写了一个比较直观
service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response.data);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况,这些自定义（需要与后台商量返回）
    error => {
        if (
           400 <= error.response.status <500
        ) {
            alert("用户信息过期，请重新登陆");
            // 清除token
            // localStorage.removeItem("token");
            // 跳转登录
            setTimeout(() => {
            //   window.location.href = "/login";
            }, 1000);
        } else {
            if (error.response.status >= 500) {
                alert("服务器开小差了，请稍后再试！");
            } else {
                alert("服务器开小差了，请稍后再试！");
                return Promise.reject(error)
            }
        }
    }
);

export default service;

• 下面是我api.js接口文件的管理，需要结合自身实际情况修改
  1、url ：请求接口的地址（就是baseURL后面的哪部分）
  2、method：请求方法
  3、data：post请求中携带的数据（obj格式），params：get请求中携带的数据（就是在浏览器地址xx/xx/xx后面?XX=oo&XX=oo这部分数据，obj格式）
  4、传过来的参数一定要在（query）=>{ } 括号中引入，函数里面才能用

// 刚刚封装的axios
import request from './axios';

// 1.获取图片验证码
export const getImgCode = () => {
    return request({
        url: '/image/code',
        method: 'get',
        // 图片验证码 response类型设置成blob，图片才能显示出来
        responseType: "blob"
    })
}


// 2.获取手机验证码
export const getPhoneCode = (query) => {
    return request({
        url: '/user/messageCode',
        method: 'post',
        data: query
    })
}

// 3. 获取用户任务列表
export const getUserTask = (query) => {
    return request({
        url: '/task/select',
        method: 'get',
        params: query
    })
}
// 4. 搜索任务接口
export const queryTask = (query1, query2) => {
    return request({
        url: '/task/query',
        method: 'post',
        data: query1,
        params: query2
    })
}

• 在xx.vue页面中的实际操作
  1、

<template>
  <div>
      <div class="code">
        <img class="codeimg" :src="this.ImgCode" @click="getCode" alt />
        <input type="text" name="验证码" placeholder="验证码" v-model="code" />
      </div>
  </div>
</template>

<script>
import { getImgCode, getUserTask } from "../request/api";

export default {
  data() {
    return { ImgCode: "", phone: "", password: "", code: "" };
  },

  mounted() {
    
    // 初始化页面之前获取图片验证码的接口，无需定义方法直接请求
    getImgCode()
      .then(res => {
        let blob = new Blob([res], { type: "image/jpeg" });
        let url = URL.createObjectURL(blob);

        this.ImgCode = url;
      })
      .catch(res => {
         alert("网络开小差了，没有获取到图片验证码哦");
      });

  },

  methods: {

   // 先定义一个方法 getCode，供上面引用，
    getCode() {
        // 传得参数对象
         let query = {
          a:this.phone,
          b:this.password
        }
      // 请求刚刚引入的封装的接口
      getUserTask (query)
        .then(res => {
        // 成功之后的操作
        })
        .catch(res => {
        // 失败时候的操作
        });
    }
  }
};
</script>


<style scoped>
</style>