[Axios] 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;
});