axios如何封装请求？

Question

this.$axios.get('/collection/select',{
    params:{
        schoolUid:this.common.getLocal('roleId'),
        name:"",
        pageNum:0,
        pageSize:0
    }
})
.then(res=>{
    if(res.data.code == 1){
        this.list_plan = res.data.data.list;
    }
})

这个请求好多页面都用到，每次都这么写用起来好累。
而且参数都是写死的，我只关心返回值就行了。这样该怎么封装比较好呢

Answer 1

api.js

export default {
    selectClct(){
        axios.get('/collection/select',{
            params
        })
        .then(res=>{
            if(res.data.code == 1){
                return res.data.data.list;
            }
        })
    }
}

用的时候

this.list_plan = await selectClct()

Answer 2

个人不建议你这样发送请求。 希望你能看下去，比较简单的

你应该这样样子。

单独封装一个axios请求的方法 axios.js 其中包含了 post，get，fromdate请求方式。

// axios.js 放入如下
import axios from 'axios';
import Cookies from 'js-cookie';

axios.defaults.timeout = 9999999;
axios.defaults.baseURL ='你的接口地址';


//http request 拦截器
axios.interceptors.request.use(
  config => {
    let token = Cookies.get('token'); //注意使用的时候需要引入cookie方法，推荐js-cookie
    
    if(config.method=='post'){ // 如果是post请求 请求体自动加上token
        config.data = config.data;
        if(token){
          config.data.token = token
        } 
        // else {
        //   console.log('token失效')
        // }
        config.headers = {
        'Content-Type':'application/x-www-form-urlencoded',
        }
    } else if(config.method=='get'){ // 如果是get请求 url中拼接上
        config.params.token = token
        config.headers = {
            'Content-Type':'application/x-www-form-urlencoded',
        }
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
    // token 可以判断已过期，重定向到登录页面
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url,params={}){
  return new Promise((resolve,reject) => {
    axios({
        url: url,
        method: 'GET',
        params: params,
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        })
        .then(res => {
            if(res.data.code == 1001){
                this.$Message.warning('登录超时,' + res.data.message);
                this.$router.push({path:'/'})
                return
            }
            resolve(res.data);
        })
        .catch(err => {
            reject(err)
        })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
        axios({
        url: url,
        method: 'POST',
        data: data,
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        })
        .then(res => {
            if(res.data.code == 1001){
                this.$Message.warning('用户超时' + res.data.message);
                this.$router.push({path:'/'})
                return
            }
            resolve(res.data);
        })
        .catch(err => {
            reject(err)
        })
   })
 }

 /**
  * from 表单
  */
 export function get_from(URL, PARAMS) {
  var p = new Promise((resolve, reject) =>{        //做一些异步操作
    var temp = document.createElement("form");
    temp.action = URL;
    temp.method = "get";
    temp.style.display = "none";
    for (var x in PARAMS) {
      var opt = document.createElement("textarea");
      opt.name = x;
      opt.value = PARAMS[x];
      temp.appendChild(opt);
    }
    document.body.appendChild(temp);
    temp.submit();
    this.$Loading.finish();
    resolve(temp) 
  });
  return p;
}

/**
 * 上传 excel
 */

export function up_excel(URL, PARAMS) {
  return new Promise((resolve,reject) => {
    let token = this.$Cookies.get('token')
    let config = {
        headers: {
        'Content-Type': 'multipart/form-data'
        }
    }
    PARAMS.append('token', token)

    axios.post(URL, PARAMS, config)
      .then( res => {
        resolve(res.data)
      })
      .catch(err=>{
        reject(err)
      })
  })
}

然后再main.vue 中将 axios.js中的方法暴露出去。然后全局注册使用（如下）

import {post,get,get_from,up_excel} from './api/axios'
Vue.prototype.$get=get;
Vue.prototype.$get_from = get_from;
Vue.prototype.$up_excel = up_excel;

这个时候，你就可以再组件中使用了。使用的方法如下

// url: 接口地址  data：参数
this.$post(url,data)
    .then(res=>{
        if(res.code == 200){
            // 成功
        } else {
            // 失败
        }
    })
    
 this.$get(url,data)
    .then(res=>{
        if(res.code == 200){
            // 成功
        } else {
            // 失败
        }
    })
   

ps: 我个人喜欢把整个接口放在一个文件中 类似于这个样子 linkUrl.js

let main = '你的接口地址'

const linkurl = {
    login : main + '/login/login',
}

export default linkurl

然后全局注册

import linkurl from './api/LinkUrl'

Vue.prototype.$linkurl = linkurl

这个时候可以直接在封装的请求中这样使用了

this.$post(this.$linkurl.login, data)  // this.$linkurl.login就是指的你的那个接口js文件
    .then(res=>{
        if(res.code == 200){
            // 成功
        } else {
            // 失败
        }
    })
    

Answer 3

比如在api文件夹里写一个公共的Js，封装这个方法，需要用到的时候import引入就可以了

Answer 4

import axios from "axios"

export const API = (url, params) => {
  return axios.get(url, params).then(res => {
    return res
  }).catch(err => {
    console.log(err)
  })
}

大致是这个思路，具体还得看你们的接口设计。

Answer 5

let HTTPFZ
HTTPFZ.get = function (url, data, callback) {
    let params = {params: data};
    axios.get(ip + url, params)
        .then(function (res) {
            //响应成功回调
            if (res.data.code === '200') {
                callback(res.data.data)
            } else {
              alert('res.data.code')
            }
        })
        .catch(function (err) {
            console.log(err);
        });
};

使用

this.$HTTPFZ.get(this.$API.url, params, function (res) {
       console.log(res)
    });

Answer 6

http://sfau.lt/b51Tv8