axios基础

axios：

axios是一个专注于网络请求的库。 不同于jquery，功能复杂，既可以操作dom，

又可以做动画，还可以发Ajax请求。axios是一个专注于网络请求的库。

 

XMLHttpRequest是：
使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。

这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中，XMLHttpRequest 被大量使

用。发送一个 HTTP 请求，需要创建一个 XMLHttpRequest 对象，打开一个 URL，最后发送请求。当所有这

些事务完成后，该对象将会包含一些诸如响应主体或 HTTP status 的有用信息。

 

axios特点：

1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据

 

axios属性：

url 是用于请求的服务器 URL

url: ‘/user’

method 是创建请求时使用的方法

method: ‘get’, 默认是get

baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。它可以通过设置

一个 baseURL 便于为 axios 实例的方法传递相对 URL（域名） 例如：http://127.0.0.1:8080
baseURL: ‘https://some-domain.com/api/’,

headers 是即将被发送的自定义请求头

 headers: {'X-Requested-With': 'XMLHttpRequest'},

params 是即将与请求一起发送的 URL 参数 ；必须是一个无格式对象(plain object)或 URLSearchParams对象,请求参数拼接在URL上。

 

 

axios  API：

向axios 请求方式：

get：（一般用于）获取数据

post：提交数据（表单提交+文件上传）

put：更新（或编辑）数据（所有数据推送到后端（或服务端））

patch：更新数据（只将修改的数据推送到后端）

delete：删除数据

get请求：

//get请求方式一：
axios({
        // 默认请求方式为get
        method: 'get',
        url: 'api',
        // 传递参数
        params: {
            key: value
        },
        // 设置请求头信息
        headers: {
            key: value
        }
        responseType: 'json'
    }).then((response) => {
        // 请求成功
        let res = response.data;
        console.log(res);
    }).catch((error) => {
        // 请求失败，
        console.log(error);
});

//get请求方式二：
axios.get("api", {
    // 传递参数
    params: {
        key: value
    },
    // 设置请求头信息，可以传递空值
    headers: {
        key: value
    }
}).then((response) => {
    // 请求成功
    let res = response.data;
    console.log(res);
}).catch(error => {
    // 请求失败，
    console.log(error);
});

post请求：

//post请求方式一：
// 注：post请求方法有的要求参数格式为formdata格式，此时需要借助 Qs.stringify()方法将对象转换为字符串
let obj = qs.stringify({
    key: value
});
axios({
    method: 'post',
    url: 'api',
    // 传递参数
    data: obj,
    // 设置请求头信息
    headers: {
        key: value
    },
    responseType: 'json'
}).then((response )=> {
    // 请求成功
    let res = response.data;
    console.log(res);
}).catch(error => {
    // 请求失败，
    console.log(error);
});

//post请求方式二：
let data = {
    key: value
},
headers = {
    USERID: "",
    TOKEN: ""
};
// 若无headers信息时，可传空对象占用参数位置
axios.post("api", qs.stringify(data), {
    headers
}
}).then((response) => {
    // 请求成功
    let res = response.data;
    console.log(res);
}).catch((error) => {
    // 请求失败，
    console.log(error);
});