Axios封装

Category : 工具 Views : 1843 Comments : 0 Posted on : 2019-09-04

1.下载axios

cnpm install axios -S

2.新建request.js

import axios from 'axios';
import router from '../../router';
import qs from 'qs'; //传给后台的数据为form格式
import { Dialog } from 'vant';//这里使用了vant组件库
// 创建axios实例
const service = axios.create({
  baseURL: 'URL', // api的base_url
  timeout: 15000, // 请求超时时间
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, 
  // 请求头处理，设置传给后台的参数格式，有form和json格式，这样写是form格式，application/json是json格式

});
// request 拦截器
service.interceptors.request.use((config) => {
  // 在发送请求之前z转换data格式
  if (config.method === 'post') {
    config.data = qs.stringify(config.data);//这一步就是通过qs将传给后台的数据格式设置为form格式
  }
  // 当通过登录接口后，会返回一个请求头数据，以后每个接口前面都要加这个请求头，用来判断是否登录
  if (window.sessionStorage.getItem('tooken')) {
    config.headers['x-auth-token'] = window.sessionStorage.getItem('tooken');
  }
  return config;
}, (error) => {
  Dialog.confirm({
    title: '提示',
    message: '登录状态异常, 是否跳转到登录页？',
  }).then(() => {
    router.push('/login');
  }).catch((error) => {
    console.log(error);
  });
});
// respone拦截器
service.interceptors.response.use((response) => {
  // 通过登录接口以后会返回一个请求头参数，存储到session里面（浏览器关闭清空），用于后面的接口
  if (response.headers['x-auth-token']) {
    window.sessionStorage.setItem('tooken', response.headers['x-auth-token']);
  }
  if (response.data.code !== 0) {
    Dialog.alert({ message: response.data.msg });
    return Promise.reject(response);//response可以通过catch捕获信息
  }
  return response.data;
}, (error) => {
  if (error.message) {
    // 登录超时
    if (error.message === 'Network Error') {
      // Dialog.alert({message:'登录超时'})
      router.push('/login');
    }
  }
  // if (error.response.status === 404) {
  //   console.error('404错误！')
  // } else {
  //   Dialog.alert({message: error.message})
  //   router.push( '/login' )
  // }
  return Promise.reject(error);
});

export default service;

3.在实际项目中使用
1.main.js中引入

import request from '@/api/request'
Vue.prototype.$axios = request

2.代码中使用

this.$axios({
    url: 'url',
    method: 'post',
    data: {}
}).then(res => {
  console.log(res.data)
}).catch(error=>{
  console.log(error)
})

4.使用proxy解决跨域
1.在项目根目录下新建文件vue.config.js（vue-cli 3.0）

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', //对应后台接口
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

如果是2.0则在config/index.js下的dev添加proxyTable
2.修改前面的request.js

// 创建axios实例
const service = axios.create({
  baseURL: '/api', // 修改的这里！！！
  timeout: 15000, // 请求超时时间
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' } // 请求头处理
})

3.重启项目
5.打包设置路径
上面这种在打包出来的index.html下看的访问接口路径是不对的，需要按以下代码重新修改一下baseUrl
// 创建axios实例

const service = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? 'http://localhost:8088' : '/api', //process.env.NODE_ENV是node变量，production表示打包，testing表示测试
  timeout: 15000, // 请求超时时间
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, // 请求头处理
});

Posted by : lyhq Tags : 本文未设置标签

所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解！

Previous post nodejs爬取笔趣阁小说

Next post js实现返回顶部功能的解决方案

Axios封装

添加新评论