VueAxios前端之美-VueJs

vue中使用axios的多种方式

2019-02-20  本文已影响229人  谢大见

文档: https://www.kancloud.cn/yunye/axios/234845
官网: https://www.axios.com/
gitHub: https://github.com/axios/axios

axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

它本身具有以下特征:

安装

安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入

为了解决这个问题,有两种开发思路,一是在引入 axios 之后,修改原型链,二是结合 Vuex,封装一个 aciton

使用npm

npm install axios

使用cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

解决post方法使用application/x-www-form-urlencoded格式编码数据

  1. 设置 headers:{ 'Content-type': 'application/x-www-form-urlencoded'}
axios.post('url',data,{headers:{ 'Content-type': 'application/x-www-form-urlencoded'}})

// 不想在每次请求都设置的话,可以集中设置下
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

  1. 仅仅这样并没有达到想要的效果,post的body主体中还是{"age":10}这样的格
    式,并不是我们想要的query参数。引入Qs,这个库是axios里面包含的,不需要再下载了
    import qs from 'qs'
    var data = qs.stringify({"name":"xie"});
    axios.post('url',data).then()
    

axios默认是不让ajax请求头部携带cookie的

axios 解决跨域cookie丢失问题

设置 axios.defaults.withCredentials = true 即可

示例代码:

                axios.defaults.withCredentials = true;
                var param = new URLSearchParams();
                param.append("vCode",vcode);
                axios.post('http://localhost',param)
                    .then(function(res) {
                        var rs=res.data;
                        console.log(rs.data);
                    })
                    .catch(function(err) {
                        console.log(err);
                    });

配合vue

Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求

之前一直使用的是 vue-resource插件,在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了;

初用axios时,无脑的按照上面的步骤进行全局引用,结果当时是惨惨的。
看了看文档,Axios 是一个基于 promise 的 HTTP 库

axios并没有install 方法,所以是不能使用vue.use()方法的。
那么难道每个文件都要来引用一次?解决方法有很多种:
1.结合 vue-axios使用

  1. axios 改写为 Vue 的原型属性
    3.结合 Vuex的action

结合 vue-axios使用

vue-axios

用于将axios集成到Vuejs的小包装器

github: https://github.com/axios/axios

安装: npm install --save axios vue-axios

vue-axios是按照vue插件的方式去写的。那么结合vue-axios,就可以去使用vue.use方法了

首先在主入口文件main.js中引用

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

之后就可以使用了,在组件文件中的methods里去使用了

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })


    },

方法2: axios 改写为 Vue 的原型属性

首先在主入口文件main.js中引用,之后挂在vue的原型链上

import axios from 'axios'
Vue.prototype.$axios= axios

在组件中使用

this.$axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })

方法3:结合vuex

在vuex在封装一层

封装 axios

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => response,
  /**
  * 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       Message({
  //         message: res.message,
  //         type: 'error',
  //         duration: 5 * 1000
  //       });
  //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
  //           confirmButtonText: '重新登录',
  //           cancelButtonText: '取消',
  //           type: 'warning'
  //         }).then(() => {
  //           store.dispatch('FedLogOut').then(() => {
  //             location.reload();// 为了重新实例化vue-router对象 避免bug
  //           });
  //         })
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service

import request from '@/utils/request'

//使用
export function getInfo(params) {
  return request({
    url: '/user/info',
    method: 'get',
    params
  });
}
上一篇下一篇

猜你喜欢

热点阅读