论坛 › IOS › 速通axios

石小疯 发表于 3 天前

速通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的设置和调用方式都很繁琐，实现异步哀求十分贫苦
// 接口地址: https://api.apiopen.top/getJoke
const p = new Promise((resolve, reject) => {
    //1. 创建对象
    const xhr = new XMLHttpRequest();
    //2. 初始化
    xhr.open("GET", "https://api.apiopen.top/getJoke");
    //3. 发送
    xhr.send();
    //4. 绑定事件, 处理响应结果
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
            //判断响应状态码 200-299
            if (xhr.status >= 200 && xhr.status < 300) {
                //表示成功
                resolve(xhr.response);
            } else {
                //如果失败
                reject(xhr.status);
            }
      }
    }
});

//指定回调
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
});


[*]jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要由于要用ajax异步网络哀求而引用jQuery框架
$.ajax({
    url: '/user/login',
    type: 'post',
    data: {
      username: 'zhangsan',
      password: '123456'
    },
    dataType: 'text',
    success: function (response) {
      alert(response);
    },
    error: function (response) {
      alert(response);
    }
});
2：axios概述

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


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

   npm安装
npm install axios
   bower安装
bower install axios
   通过cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   在vue项目标main.js文件中引入axios
import axios from 'axios'

Vue.prototype.$axios = axios // 声明Vue的原型用又axios
同时可以在组件中如许使用：
<script>
        export default {
                mounted(){
                        this.$axios.get('/goods.json').then(res=>{
                                console.log(res.data);
                        })
                }
        }
</script>
二：axios的哀求方式

https://i-blog.csdnimg.cn/direct/a82c3e6a55544c37b89467a9b8f1a29c.png
1：get哀求

//请求格式类似于 http://localhost:8080/goods.json?id=1
this.$axios.get('/goods.json',{ // 第一个参数是指定路由url
    params: {
      id:1 // 设置请求参数
    }
}).then(res=>{
            // 如果是正确返回。。。
      console.log(res.data);
    },err=>{
            // 如果是抛出错误
      console.log(err);
})
// 当然还可以这样，使用method属性方式声明请求类型
this.$axios({
    method: 'get',
    url: '/goods.json',
    params: {
      id:1
    }
}).then(res=>{
    console.log(res.data);
},err=>{
    console.log(err);
})
2：post哀求

一样平常分成两种类型：


[*]form-data 表单提交，图片上传、文件上传时用该类型比较多
[*]application/json 一样平常是用于 ajax 异步哀求
this.$axios.post('/url',{
    id : 1 // 指定参数
}).then(res=>{
    console.log(res.data); // 成功调用的处理
},err=>{
    console.log(err); // 错误调用的处理
})
$axios({
        method: 'post', // 同理，在这里指定为post
        url: '/url',
        data: {
                id:1
        }
}).then(res=>{
        console.log(res.data);
},err=>{
        console.log(err);
})
   对于form-data哀求的示例
let data = {
        //请求参数
}

// 声明FormData对象，将请求参数的key,value放进去
let formdata = new FormData();
for(let key in data){
        formdata.append(key,data);
}

// 第二个参数，指定为Formdata对象
this.$axios.post('/goods.json',formdata).then(res=>{
        console.log(res.data);
},err=>{
        console.log(err);
})
3：put和patch哀求

   put哀求
this.$axios.put('/url',{
    id:1
}).then(res=>{
    console.log(res.data);
})
   patch哀求
this.$axios.patch('/url',{
    id:1
}).then(res=>{
    console.log(res.data);
})
4：delete哀求

   参数通过明文的方式进行提交
this.$axios.delete('/url',{
    params: {
      id:1
    }
}).then(res=>{
    console.log(res.data);
})
   参数以封装对象的形式提交
this.$axios.delete('/url',{
    data: {
      id:1
    }
}).then(res=>{
    console.log(res.data);
})

//方法二
axios({
    method: 'delete',
    url: '/url',
    params: { id:1 }, //以明文方式提交参数
    data: { id:1 } //以封装对象方式提交参数
}).then(res=>{
        console.log(res.data);
})
5：并发哀求

通过all(哀求1，哀求2)声明并发哀求
通过spread对哀求的效果进行处置惩罚
this.$axios.all([
        this.$axios.get('/goods.json'),
        this.$axios.get('/classify.json')
]).then(
        this.$axios.spread((goodsRes,classifyRes)=>{
                console.log(goodsRes.data);
                console.log(classifyRes.data);
        })
)
三：Axios实例

1：创建axios实例

// 创建一个axios实例
let instance = this.$axios.create({
    baseURL: 'http://localhost:9090', // 请求的基本地址
    timeout: 2000 // 请求的超时时长
})

// 通过实例使用get/post等进行http调用
instance.get('/goods.json').then(res=>{
        console.log(res.data);
})
可以同时创建多个axios实例。axios实例常用设置：


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

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

let instance = this.$axios.create();
instance.defaults.timeout = 3000;
4：哀求设置axios

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

查看完整版本: 速通axios