基于axios的请求封装

1.由于项目越来越大,没有进行封装复用，引起的代码就会冗余，所以今天就来封装一下请求。

1.安装：npm install axios
2.简单使用,

      params:{
          id:1
      }
  })
  .then(data=>{})
  .catch(err=>{})
    axios.post("url",{
		
    })
但是由于只是简单的请求，如果需要加请求拦截就会变得麻烦。所以进行封装下。

3…新建一个文件夹，里面分别放api.js和config.js和request.js
[外链图片转存失败(img-3h7QnDTz-1565789745441)(C:\Users\CSSE\AppData\Roaming\Typora\typora-user-images\1565752547572.png)]

4.首先定义全局的Js,也就是在config.js种定义。

const hostName = "http://172.0.0.1:8080";
export default hostName;

5.第二步我们要对get、post方法、请求拦截、错误处理进行封装（也是最终要的一步），在request.js文件中进行。

import axios from "axios"; //导入axios
import qs from "qs";//吧json对象在转换成,name=1&age=2这种形式的
import hostName from "./config.js";//导入全局的url
import Vue from "vue"; //vue
import router from "../router/index.js";//路由
//定义一个方法名为httpRequest的函数,并且传入一个对象作为形参:url,method,data,headers,cancalToken
function httpRequest({
  url,
  method = "get",
  data = {},
  headers = {},
  cancelToken
}) 
//定义请求头
{   let _headers = {
    "content-type": "application/json",
    access_token: sessionStorage.getItem("token"),
    ...headers //拓展运算符，相当于和并对象,（如果headers里面有内容就合并到_headers里面去）
  };
  let _data = data;
  //如果是post请求，content-type=="application/json"，就装换为json的data
  if (headers['"content-type'] === "application/json") {
    _data = JSON.stringify(data);
  }
  return new Promise((resolve, reject) => {
    axios({
      url: hostName + url,
      method: method,
      headers: _headers,
      data: method == "post" ? _data : {},
      params: method == "get" ? data : {},
      paramsSerializer: function(params) {
        return qs.stringify(params);
      },
      cancelToken: cancelToken,
      timeout: 2500
    })
    //后端返回的不同状态提示处理
      .then(res => {
        console.log(url+'===',res.data)
        if (res.data.code == "000") {
        //异步操作成功
          resolve(res.data);
        } else {
          if (res.data.code == "002") {
            //登录失效
            sessionStorage.setItem("isLoginTimeout", "1");
            router.push("/login?redirect=" + router.currentRoute.fullPath);
          } else {
            if (res.data.msg) {
            //提示消息，
              Vue.prototype.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          }
        }
      })
       .catch(res => {
         reject(res);
       });
  });
}

export let CancelToken = axios.CancelToken;
export default httpRequest;

6.直接可以条用httpRequest方法,传入实参url,method(默认get),data等，如果是post,可以加上 // headers:{“content-type”:"application/json}

import httpRequest from "./request"
import {
    http
} from "./data-api";
import hostName from './config'
const api = {
    //登录
    login(data) {
        return httpRequest({
            url: "/user/login",
            method: "post",
            data: data,
                //   headers:{
            //     "content-type":"application/json"
            // }
        })
    },
    // ceshi(data){
    //     return httpRequest({
    //         url:"/resource/queryAllResources",method:"get",data:data
    //     })
    // }
    //机构管理菜单
    orgquery(data) {
        return httpRequest({
            url: "/org/query",
            method: "get",
            data: data
        })
    },
    orgsync(data) {
        return httpRequest({
            url: "/org/sync",
            data: data
        })
    },};
export default api;

7.最后要在main.js中挂载。

import api from "./api/api" //导入api.js文件
Vue.prototype.$http=api;//挂载到vue原型上面,即可使用

8.页面中的使用
1565764819528