速通axios

速通axios


  
   axios = ajax + IO + system
  axios基于promise用于浏览器和node.js的http客户端，因此可以使用Promise API
  一：什么是axios

1：先谈Ajax

说到axios我们就不得不说下Ajax。
在旧浏览器页面在向服务器哀求数据时，由于返回的是整个页面的数据，页面都会逼迫革新一下，这对于用户来讲并不是很友爱。
而且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。
而我们只是需要修改页面的部分数据，也希望不革新页面，因此异步网络哀求就应运而生。
Ajax -> Asynchronous JavaScript and XML
异步网络哀求。Ajax可以或许让页面无革新的哀求数据。
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：

• 原生的XMLHttpRequest的设置和调用方式都很繁琐，实现异步哀求十分贫苦
  

1. // 接口地址: https://api.apiopen.top/getJoke
2. const p = new Promise((resolve, reject) => {
3.     //1. 创建对象
4.     const xhr = new XMLHttpRequest();
5.     //2. 初始化
6.     xhr.open("GET", "https://api.apiopen.top/getJoke");
7.     //3. 发送
8.     xhr.send();
9.     //4. 绑定事件, 处理响应结果
10.     xhr.onreadystatechange = function () {
11.         if (xhr.readyState === 4) {
12.             //判断响应状态码 200-299
13.             if (xhr.status >= 200 && xhr.status < 300) {
14.                 //表示成功
15.                 resolve(xhr.response);
16.             } else {
17.                 //如果失败
18.                 reject(xhr.status);
19.             }
20.         }
21.     }
22. });
24. //指定回调
25. p.then(function (value) {
26.     console.log(value);
27. }, function (reason) {
28.     console.error(reason);
29. });

复制代码

• jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要由于要用ajax异步网络哀求而引用jQuery框架
  

1. $.ajax({
2.     url: '/user/login',
3.     type: 'post',
4.     data: {
5.         username: 'zhangsan',
6.         password: '123456'
7.     },
8.     dataType: 'text',
9.     success: function (response) {
10.         alert(response);
11.     },
12.     error: function (response) {
13.         alert(response);
14.     }
15. });

复制代码

2：axios概述

这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不外它是基于Promise的，符合最新的ES规范。具备以下特点：

• 在浏览器中创建XMLHttpRequest哀求
  
• 在node.js中发送http哀求
  
• 支持Promise API
  
• 拦截哀求和响应
  
• 转换哀求和响应数据
  
• 取消要求
  
• 自动转换JSON数据
  
• 客户端支持防止CSRF/XSRF(跨域哀求伪造)
  

3：axios的安装

   npm安装

1. npm install axios

复制代码

  bower安装

1. bower install axios

复制代码

  通过cdn引入

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

复制代码

  在vue项目标main.js文件中引入axios

1. import axios from 'axios'
3. Vue.prototype.$axios = axios // 声明Vue的原型用又axios

复制代码

同时可以在组件中如许使用：

1. <script>
2.         export default {
3.                 mounted(){
4.                         this.$axios.get('/goods.json').then(res=>{
5.                                 console.log(res.data);
6.                         })
7.                 }
8.         }
9. </script>

复制代码

二：axios的哀求方式

1：get哀求

1. //请求格式类似于 http://localhost:8080/goods.json?id=1
2. this.$axios.get('/goods.json',{ // 第一个参数是指定路由url
3.     params: {
4.         id:1 // 设置请求参数
5.     }
6. }).then(res=>{
7.             // 如果是正确返回。。。
8.         console.log(res.data);
9.     },err=>{
10.             // 如果是抛出错误
11.         console.log(err);
12. })

复制代码

1. // 当然还可以这样，使用method属性方式声明请求类型
2. this.$axios({
3.     method: 'get',
4.     url: '/goods.json',
5.     params: {
6.         id:1
7.     }
8. }).then(res=>{
9.     console.log(res.data);
10. },err=>{
11.     console.log(err);
12. })

复制代码

2：post哀求

一样平常分成两种类型：

• form-data 表单提交，图片上传、文件上传时用该类型比较多
  
• application/json 一样平常是用于 ajax 异步哀求
  

1. this.$axios.post('/url',{
2.     id : 1 // 指定参数
3. }).then(res=>{
4.     console.log(res.data); // 成功调用的处理
5. },err=>{
6.     console.log(err); // 错误调用的处理
7. })

复制代码

1. $axios({
2.         method: 'post', // 同理，在这里指定为post
3.         url: '/url',
4.         data: {
5.                 id:1
6.         }
7. }).then(res=>{
8.         console.log(res.data);
9. },err=>{
10.         console.log(err);
11. })

复制代码

  对于form-data哀求的示例

1. let data = {
2.         //请求参数
3. }
5. // 声明FormData对象，将请求参数的key,value放进去
6. let formdata = new FormData();
7. for(let key in data){
8.         formdata.append(key,data[key]);
9. }
11. // 第二个参数，指定为Formdata对象
12. this.$axios.post('/goods.json',formdata).then(res=>{
13.         console.log(res.data);
14. },err=>{
15.         console.log(err);
16. })

复制代码

3：put和patch哀求

   put哀求

1. this.$axios.put('/url',{
2.     id:1
3. }).then(res=>{
4.     console.log(res.data);
5. })

复制代码

  patch哀求

1. this.$axios.patch('/url',{
2.     id:1
3. }).then(res=>{
4.     console.log(res.data);
5. })

复制代码

4：delete哀求

   参数通过明文的方式进行提交

1. this.$axios.delete('/url',{
2.     params: {
3.         id:1
4.     }
5. }).then(res=>{
6.     console.log(res.data);
7. })

复制代码

  参数以封装对象的形式提交

1. this.$axios.delete('/url',{
2.     data: {
3.         id:1
4.     }
5. }).then(res=>{
6.     console.log(res.data);
7. })
9. //方法二
10. axios({
11.     method: 'delete',
12.     url: '/url',
13.     params: { id:1 }, //以明文方式提交参数
14.     data: { id:1 } //以封装对象方式提交参数
15. }).then(res=>{
16.         console.log(res.data);
17. })

复制代码

5：并发哀求

通过all(哀求1，哀求2)声明并发哀求
通过spread对哀求的效果进行处置惩罚

1. this.$axios.all([
2.         this.$axios.get('/goods.json'),
3.         this.$axios.get('/classify.json')
4. ]).then(
5.         this.$axios.spread((goodsRes,classifyRes)=>{
6.                 console.log(goodsRes.data);
7.                 console.log(classifyRes.data);
8.         })
9. )

复制代码

三：Axios实例

1：创建axios实例

1. // 创建一个axios实例
2. let instance = this.$axios.create({
3.     baseURL: 'http://localhost:9090', // 请求的基本地址
4.     timeout: 2000 // 请求的超时时长
5. })
7. // 通过实例使用get/post等进行http调用
8. instance.get('/goods.json').then(res=>{
9.         console.log(res.data);
10. })

复制代码

可以同时创建多个axios实例。axios实例常用设置：

• baseURL 哀求的域名，根当地址，类型：String
  
• timeout 哀求超时时长，单元ms，类型：Number
  
• url 哀求路径，类型：String
  
• method 哀求方法，类型：String
  
• headers 设置哀求头，类型：Object
  
• params 哀求参数，将参数拼接在URL上，类型：Object
  
• data 哀求参数，将参数放到哀求体中，类型：Object
  

2：全局设置axios

1. //配置全局的超时时长
2. this.$axios.defaults.timeout = 2000;
3. //配置全局的基本URL
4. this.$axios.defaults.baseURL = 'http://localhost:8080';

复制代码

3：实例设置axios

1. let instance = this.$axios.create();
2. instance.defaults.timeout = 3000;

复制代码

4：哀求设置axios

1. this.$axios.get('/goods.json',{
2.     timeout: 3000
3. }).then()

复制代码