vuejs中使用axios网络请求库的多种方式

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

axios

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

它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

安装

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

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

使用npm

npm install axios

使用cdn:

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

设置 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';

　　2. 仅仅这样并没有达到想要的效果，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使用

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
  });
}

posted @ 2022-11-07 11:38 唯一客服系统开发笔记阅读(258) 评论(0) 编辑收藏举报

刷新页面返回顶部