[Axios] axios的基础语法

axios的基础语法

 

Axios中文说明

 
 

如何安装axios

在当前目录下打开命令行

• 利用yarn安装 : yarn add axios,如果显示yarn没有找到该命令,则需要安装npm install -g yarn
• 利用npm安装 : npm install axios --save
• 利用bower安装 : bower install axios --save
• 利用cdn引入 : <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 
 

axios特点

• 从浏览器中创建XMLHttpRequest；

• 从nodejs发出http请求

• 支持promiseAPI

• 拦截 请求和响应

• 转换请求和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防止CSRF/XSRF攻击

 
 

axios用法

axios是一个类库，基于PROMISE管理的AJAX库

• 提供了对应请求方式的方法（例如：get/post/head/delete/put/options…)

  • axios.get() 向服务器发送一个请求，基于的是GET方式

• 支持的参数配置

  • axios.get([URL],[OPTIONS])

• 基于GET或者POST方法发请求，返回的结果都是PROMISE实例

 

发送一个GET请求

GET请求中，会把PARAMS中的键值对拼接成URLENCODE格式的字符串，然后以问号传递参数的方式，传递给服务器，类似于JQ-AJAX中的DATA（或者自己基于URL后面拼接也可以，不用PARAMS）

axios.get('get获取的地址', {
    params: {
        name: 'DG',
        age: 0
    }
});

get请求需要用到params

 

发送一个post请求

配置项中传递的内容都相当于基于请求主体专递给服务器，但是传递给服务器的内容格式是RAW(JSON格式的子字符串)，不是X-WWW-FORM-URLENCODED

axios.post('post获取的地址', {
    name: 'DG',
    age: 0
});

post请求不需要用到params

 

then/catch

• data ：从服务器获取的响应主体内容

• headers ：从服务器获取的响应的头信息

• request ：创建的AJAX实例

• status ：状态码

• statusText ：状态码的描述

• config ：基于AXIOS发送请求的时候做的配置项

let promise = axios.get('get获取的地址', {
    params: {
        lx: 12
    }
});
promise.then(result => {
    // console.log(result);//=>获取的结果是一个对象
}).catch(msg => {
    console.log(msg);//=>请求失败的原因
});

axios.get('get获取的地址', {
    params: {
        lx: 12
    }
}).then(result => {
    let {data} = result;
    // console.log(data);

    return axios.post('post获取的地址');
}).then(result => {
    let {data} = result;
    // console.log(data);
});

 

发送多次请求

let sendAry = [
    axios.get('get获取的地址1'),
    axios.get('get获取的地址2'),
    axios.post('post获取的地址')
];
//=>三个请求都完成才做一些事情（可以基于ALL实现）
axios.all(sendAry).then(result => {
    console.log(result);//=>输出是一个数组，分别存储每一个请求的结果
    let [resA, resB, resC] = result;
});

数组sendAry存放三个AJAX请求的PROMISE实例