Axios封装

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' }, // 请求头处理
});

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

添加新评论

你的选择是做或不做,但不做就永远不会有机会。

凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历尽沧桑悟然。

生命要得到丰盛的收获,必需阳光;同时,也需要“雨”的浇灌。

人生应该树立目标,否则你的精力会白白浪费。

山涧的泉水经过一路曲折,才唱出一支美妙的歌。

常求有利别人,不求有利自己。

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论选择做什么,追求完美的程度决定成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

成功源于不懈的努力。

暗自伤心,不如立即行动。

再多一点努力,就多一点成功。

得意淡然,失意坦然;喜而不狂,忧而不伤。

海纳百川,有容乃大;壁立千仞,无欲则刚。

生活其实很简单,过了今天就是明天。

你要记住你不是为别人而活,你是为自己而活。

岂能尽随人愿,但求无愧我心。

在你内心深处,还有无穷的潜力,有一天当你回首看时,你就会知道这绝对是真的。

活在当下,别在怀念过去或者憧憬未来中浪费掉你现在的生活。

挫折时,要像大树一样,被砍了,还能再长;也要像杂草一样,虽让人践踏,但还能勇敢地活下去。