• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

vue封装axios

代码笔记 barben 3年前 (2020-06-05) 4981次浏览 0个评论

和之前文章《微信小程序封装request请求》很像的独门For循环写法…
优势确实是很干净啦~

1、新建两个文件,用于对axios的封装和对接口的管理

我这里在src/assets/js/api之下新建了一个index.jsapiList.js


index.js中,对axios进行封装:

import axios from 'axios';
import { Message } from 'element-ui';
import apiList from './apiList';
import store from '@/store';
 
axios.defaults.timeout = 5000; // 超时终止请求
axios.defaults.baseURL ='http://192.168.0.88:8080/'; // 配置请求地址

// 设置请求拦截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名称'); // 注意使用的时候需要引入cookie方法,推荐js-cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
        'Content-Type': 'application/json;charset=UTF-8',
        // 'Content-Type':'application/x-www-form-urlencoded'
    }
    if(store.state.token) {
      config.headers['Authorization'] = store.state.token;
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

// 设置响应拦截器
axios.interceptors.response.use(
  response => {
    // if(response.data.errCode == 2){
    //   router.push({
    //     path:"/login",
    //     querry:{redirect:router.currentRoute.fullPath} // 从哪个页面跳转
    //   })
    // }
    // return response;
    let res = response.data; // 取到响应返回的数据
    if(res.code == 200) {
      return res.data;
    } else {
      // 状态码如果不是200则为报错,弹出报错信息,且不返回任何数据
      Message.error(res.msg);
    }
  },
  error => {
    Message.error(error.message);
    return Promise.reject(error)
  }
)

// 以下是封装方法:
// get delete请求方式中,第一个参数为请求的url地址,第二个参数为请求的一些配置项,需要传递给后端的参数包含在配置项的data或者params属性中,
// post put patch请求则第一个参数为url地址,第二个参数是需要入参的json数据,第三个参数是入参以外的其他配置项。

var list = {};

for(let item in apiList) {
  list[item] = function(params) {
    let [method, url] = apiList[item];
    let data = (method == 'get' || method == "delete") ? {params} : (method == 'post' || method == "put" || method == "patch") ? params : {}
    return new Promise((resolve, reject) => {
      axios[method](url, data)
      .then(res => {
        if(res) {
          // 在响应拦截器中,设置了code非200不返回数据,res则有可能会是undefined。所以判断res有数据才用resolve送出去。
          resolve(res);
        }
      })
      .catch(err => {
        reject(err);
      })
    })
  }
}

export default list;

apiList.js中,对所有接口进行统一管理:

let apiList = {
    login: ["post", "/user/login"], // 用户登录
    getCaptcha: ["get", "/user/captcha"], // 获取登录图片验证码
    logout: ["get", "/user/logout"], // 用户登出
}

export default apiList;

2、在main.js中引入

import http from '@/assets/js/api'; // 引入接口列表
Vue.prototype.$http = http; // 将接口列表挂载到全局

3、在页面中使用封装好的方法

let params = {
  username: "barben",
  password: "12345678"
}

this.$http.login(params)
.then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err);
})

 


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
vue封装axios - https://www.barben.cn/code/845.html
喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址