vue工程学习（8）之请求模块axios使用

vue工程学习（8）之请求axios使用

1.常用前端请求方式：ajax、vue-resurce、axios

1）ajax

传统*Ajax的核心是XMLHttpRequest对象

优点：不需要插件支持：不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可

缺点：浏览器对XMLHttprequest对象的支持度不足，破坏浏览器前进、后退按钮的正常功能、对搜索引擎的支持不足、开发和调试工具的缺乏

2）vue-resurce

vue-resurce是vue1.x推出来的请求方式，但是现在已经不维护了，这个我们不深入了解

3）axios

axios是vue-resurce的替换，vue2.x之后官网就推出了axios。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

优点：使用简单，性能高

2.什么是axios

官网说法：

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

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

简单来说就是一个请求方式，比ajax更加简单，轻量级

3.安装

安装命令：npm install axios

检查安装是否成功，看看package.json是否已经有引包

4.初体体验使用

1）axios请求对象模式

axios(config)（推荐使用这种方式）

2）axios请求方式别名模式

请求方法别名

为了方便我们为所有支持的请求方法均提供了别名。

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

注释

当使用以上别名方法时，url，method和data等属性不用在config重复声明。

3）config对象属性配置说明

• url: ‘/user’（// url 是请求的接口地址）
• method: ‘get’（默认值：get，请求的方法）
• baseURL: ‘https://some-domain.com/api/’（如果url不是绝对路径，那么会将baseURL和url拼接作为请求的接口地址，用来区分不同环境，建议使用）
• headers: {‘X-Requested-With’: ‘XMLHttpRequest’}（请求头）
• params：{}（URL参数，就是会自动拼接到url后面的参数，一般配合get请求方式使用）
• data：{}（请求体数据，只有当请求方法为’PUT’, ‘POST’,和’PATCH’时可用）
• timeout: 1000（请求超时时间（单位：毫秒））
• proxy（代理）
• 等等，详细可以到官网查看

4）初次使用

自己先搭建好一个后台服务器用来给自己使用，我的服务器是本地：http://localhost:8080，vue是http://localhost:9002

创建组件：User.vue

<template>
  <div>
    <el-button @click="getInfo">获取数据</el-button>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "User",
    methods: {
      getInfo() {
        axios({
          url: 'http://localhost:8080/test'
        }).then(res=>{
          console.log(res)
        }).catch(error=>{
          console.log(error)
        })
      }
    }
  }
</script>

5）问题

跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/test’ from origin ‘http://localhost:9002’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方式：在项目的package.json同级建一个vue.config.js，把代理（proxy: ‘http://localhost:8080’）加上就好

module.exports = {
  devServer: {
    port: 9002,
    proxy: 'http://localhost:8080'
  },
  configureWebpack: {
    name: '你好 vue', // page title,
  },
};

如果配置了代理，在axios就可以把http://localhost:8080去掉，直接使用

axios({
  url: '/test'
}).then(res=>{
  console.log(res)
}).catch(error=>{
  console.log(error)
})

再次访问

6）请求成功

5.axios并发请求

官网的例子：

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

意思：就是两个同时进行，两个结合可以合在一个处理，这种情况要看具体业务怎么玩，一般项目都好像用不到

6.axios封装

1）为什么要封装？

大家都使用axios的时候都是在组件直接引入import axios from 'axios',然后就是axios(config)

问题：

• 那天axios不再维护了，就会出现更换问题，就是之前vue1.x的vue-resurce，所有第三方插件的使用都尽可能自己在封装一层，为之后做维护使用
• 组件都在使用import方式，更换就会出现工作超大的问题，还有可能改漏

好处：

• 以后更换第三方插件的时候，只需要修改封装的类就可以

2）封装axiosJS

在src目录下新建一个request文件夹

创建一个axiosGlobal.js

//创建axios实例
import axios from "axios";

const requestAxios = axios.create({
  //全局超时设置
  timeout: 5000
});

//请求之前拦截器
requestAxios.interceptors.request.use(
  config => {
    console.log("请求之前拦截config:");
    console.log(config);
    //这个可以对config在统一封装，比如封装token值之类的
    //返回给请求
    return config;
  },
  error => {
    console.log("请求之前拦截失败");
    console.log(error);
  }
)

//请求返回结果之后拦截
requestAxios.interceptors.response.use(
  res => {
    console.log("请求返回结果之后拦截res:");
    console.log(res);
    //这里对请求的响应码做响应处理，比如：没权限，登录失效了之后的操作
    return res;
  },
  error => {
    console.log("请求返回结果之后拦截失败");
    console.log(error);
  }
)

export default requestAxios;

创建一个index.js

import requestAxios from './axiosGlobal'

//封装axios
const request = function (config) {
  return requestAxios(config)
}

// const request = function (config){
//   return new Promise((resolve,reject)=>{
//     //网络请求
//     requestAxios(config)
//       //成功，回调
//       .then(res=>{
//         resolve(res)
//       })
//       //失败，回调
//       .catch(err=>{
//         reject(err)
//       })
//   })
// }

export default request;

3）开始使用

在main引入index.js

import request from './request/index'
//注册全局属性
Vue.prototype.$req = request;

请求使用

this.$req({
 url: '/test'
 }).then(res=>{
   console.log(res)
 }).catch(error=>{
   console.log(error)
 })

4）请求结果

6.还有很多细节操作，需要慢慢深入，后续用到就补充上去，一起学习vue