AXIOS的基础应用

axios是基于Promise封装的一款AJAX库 (核心是:XMLHttpRequest)
链接: link.

基于axios发送AJAX请求，返回的结果都是一个Promise实例
=>AJAX请求成功(网络层成功:状态码以2开头)
=>对应的Promise实例也是成功

Qs 中有三个方法 formats parse stringify

Qs.stringify({name:"xiaoyu",age:22},{arrayFormat: 'brackets'})
输出结果在下
"name=xiaoyu&age=22"

Qs.parse("name=xiaoyu&age=22")
输出结果在下
{name: "xiaoyu", age: "22"}

一些基本的配置信息
axios({
    // 发送给服务器的地址一般都是: baseURL + url
    url: "/user/list",
    baseURL: "http://127.0.0.1:8080",
    method: "post",
    // 设置自定义请求头信息
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    // GET请求的传参信息(默认按照问号传参传递给服务器)
    params: {
        search: ""
    },
    // POST请求基于请求主体传递给服务器的内容(AXIOS默认是把对象变为JSON字符串，按照application/json格式传递给服务器的)
    data: {
        lx: 1,
        name: "清欢"
    },
    transformRequest: function (data) {
        // 只针对于POST请求，在这里可以在发送给服务器数据之前，把请求主体中的信息进行格式化处理(处理为我们想要的格式)
        return Qs.stringify(data)
    },
    // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
    timeout: 0,
    // `withCredentials` 表示跨域请求时是否需要使用凭证
    withCredentials: false,
    // 预设服务器返回数据类型的格式，不能干预服务器返回的数据格式，只会把服务器返回的格式按照我们的配置转换为对应的数据格式
    responseType: "json",
    // 自定义AJAX请求成功和失败的请求标准
    validateStatus(status) {
        return status >= 200 && status < 300
    }
})

// 也可以设置一些公共的配置信息 便于每一个请求使用
axios.defaults.baseURL = "http://127.0.0.1:8080"
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded"
axios.defaults.transformRequest = data => Qs.stringify(data)
axios.defaults.timeout = 0
axios.defaults.withCredentials = true

axios({
    url: "/user/list",
    method: "get",
    params: {
        departmentId: 0,
        search: ''
    },
    headers: {
        account: "lalalala"
    }
})

axios({
    url: "/user/login",
    method: "post",
    data: {
        account: "小雨",
        password: ""
    }
})

上面的方式如果写多个会很复杂 我们按照下面的方式来写
axios.get(url,[config])
axios.post(url,data,[config])
// config 是配置项

axios.get("/user/list", {
    params: {
        departmentId: 0,
        search: ''
    }
}).then(response => {
    console.log(response);
 
    // response会包含以下所有的属性
    /!*
        status:状态码
        statusText:状态码的详细信息
        request:XHR实例对象
        config:自己传递的配置项信息
        headers:存储响应头信息
        data:相应主体信息(默认已经转换为JSON格式的对象了)
 
        这个原生的方法可以获取所有的请求头信息 getAllResponseHeaders()
    *!/
    console.log(response.request.getAllResponseHeaders());
 
    // 我们一般只要data中的信息，所以只返回data即可
    return response.data
}).then(result => {
    console.log(result);
})

axios.post("/user/login", {
    account: "xiaoyu",
    password: ""
})

// 响应拦截器，从服务器获取结果 ~ 自己.then中间做的事情
// 设置了响应拦截器就可以省略中间的这一步then 响应拦截器主要对 失败时做了详细的处理
axios.interceptors.response.use(response => {
    // 从服务器获取到了数据，我们只把响应主体信息传递给下一个then即可
    return response.data
}, reason => {
    // 从服务器没有获取到数据(网络层失败)
    let response = null
    if (reason) {
        // 有reason 说明服务器有响应，状态码是4/5开头的 然后再判断它的状态码
        let response = reason.response
        switch (response.status) {
            case 401:
                // 一般情况下是未登录(未授权)
                break;
            case 403:
                // 一般情况下是token过期
                break;
            case 404:
                // 地址不存在
                break
        }
    } else {
        if (!window.navigator.onLine) {
            // window.navigator.onLine = true 代表有网
            alert("网络断开，请稍后重试")
        }
    }
    
    // 失败时一定要写下面这一步 若是不写一样会走下面的then方法
    return Promise.reject(response)
})

axios.get("/user/list", {
    params: {
        departmentId: 0,
        search: ''
    }
})
// 响应拦截器走完才会走下面这个then
.then(result => {
    console.log(result);
})

// 请求拦截器:我们发送请求 ~ 服务器接受到内容 之间处理的事情(不论 get 和 post)
axios.interceptors.request.use(config => {
    // 真实项目中，我们一般会在登录成功以后，把从服务器获取到的token信息存储到本地，以后再发送请求时，一般都把token带上(自定义请求头)
    let token = localStorage.getItem("token")
    if(token){
        config.headers['Authorization'] = token
    }
    // 上面的if判断也可写成下面的这种方式
	// token && (config.headers["Authorization"] = token)
    return config
})