Vue:对Axios的封装以及使用

1.下载axios以及所需的插件

    yarn add nprogress //进度条
    vue add element-ui //下载饿了么框架
    yarn add axios //下载axios

2.封装axios

//1.在src目录下创建http文件夹，在文件价里创建axios.js

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { Message } from 'element-ui';
import axios from 'axios';
axios.defaults.baseURL = ''; //域名

//请求响应器
axios.interceptors.request.use(
  (config) => {
  //获取token，并放在请求头上
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.token = token;
    }
    NProgress.start();
    return config;
  },
  (error) => {
    Message.error(error);
    NProgress.start();
    Promise.reject(error);
  }
);

//请求拦截器
axios.interceptors.response.use(
  (res) => {
    NProgress.done();
    return res.data;
  },
  (err) => {
    NProgress.done();
    
    //请求的状态码
    if (err && err.response && err.response.status) {
      switch (err.response.status) {
        case 400:
          ElMessage.error('请求错误');
          break;
        case 401:
          ElMessage.error('未授权,请登录');
          router.push('/'); //token过期就重新登录
          return;
        case 403:
          ElMessage.error('拒绝访问');
          return;
        case 404:
          ElMessage.error('请求地址出错');
          return;
        case 408:
          ElMessage.error('请求超时');
          return;
        case 500:
          ElMessage.error('服务器内部出错');
          return;
        case 501:
          ElMessage.error('服务未实现');
          return;
        case 502:
          ElMessage.error('网关错误');
          return;
        case 503:
          ElMessage.error('服务不可用');
          return;
        case 504:
          ElMessage.error('网关超时');
          return;
        case 505:
          ElMessage.error('HTTP版本不受支持');
          return;
        default:
          ElMessage.error('服务器错误');
          return;
      }
    }
  return  Promise.reject(err);
  }
);
export default axios;

3.封装请求

//2.在http文件夹里创建api.js
//这里选着暴露多个对象，也可以暴露一个对象

import axios from "axios"
export const login = (params)=>{
    return axios({
        url:"",
        method:"get",
        params
    })
}

export const register = (data)=>{
    return axios({
        url:"",
        method:"post",
        data
    })
}

4.使用axios以及api请求

//3.在main.js文件中

import "./http/axios.js"
import api from "./http/api.js"
Vue.prototype.$api. = api 

//4使用api请求
在Login.vue 文件中
<div @click='login'>login</div>

methods:{
   async login(){
        const res = await = this.$api.login()
    }
}

• 100 "continue"
• 101 "switching protocols"
• 102 "processing"
• 200 "ok"
• 201 "created"
• 202 "accepted"
• 203 "non-authoritative information"
• 204 "no content"
• 205 "reset content"
• 206 "partial content"
• 207 "multi-status"
• 208 "already reported"
• 226 "im used"
• 300 "multiple choices"
• 301 "moved permanently"
• 302 "found"
• 303 "see other"
• 304 "not modified"
• 305 "use proxy"
• 307 "temporary redirect"
• 308 "permanent redirect"
• 400 "bad request"
• 401 "unauthorized"
• 402 "payment required"
• 403 "forbidden"
• 404 "not found"
• 405 "method not allowed"
• 406 "not acceptable"
• 407 "proxy authentication required"
• 408 "request timeout"
• 409 "conflict"
• 410 "gone"
• 411 "length required"
• 412 "precondition failed"
• 413 "payload too large"
• 414 "uri too long"
• 415 "unsupported media type"
• 416 "range not satisfiable"
• 417 "expectation failed"
• 418 "I'm a teapot"
• 422 "unprocessable entity"
• 423 "locked"
• 424 "failed dependency"
• 426 "upgrade required"
• 428 "precondition required"
• 429 "too many requests"
• 431 "request header fields too large"
• 500 "internal server error"
• 501 "not implemented"
• 502 "bad gateway"
• 503 "service unavailable"
• 504 "gateway timeout"
• 505 "http version not supported"
• 506 "variant also negotiates"
• 507 "insufficient storage"
• 508 "loop detected"
• 510 "not extended"
• 511 "network authentication required"

记录一下，免得忘记。