axios的配置

2019-05-19 本文已影响316人 Grayly吖

一、axios

1、axios是对ajax请求的封装

2、ajax

（1） $\color{red}{Ajax }$ ：Asynchronous Javascript AndXML（即异步 JavaScript 和 XML的英文缩写），是指一种创建交互式网页应用的网页开发技术。
（2）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
（3）通过在后台与服务器进行少量数据交换，实现网页的局部更新

3、原生ajax请求实现

（1）创建异步对象
（2）设置请求的url参数，第一个参数是请求的类型
（3）发送请求
（4）监听数据什么时候返回

$\color{red}{get}$ 请求：

        //步骤一:创建异步对象
        var ajax = new XMLHttpRequest();
        //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
        ajax.open('get', 'http://。。。');
        //步骤三:发送请求
        ajax.send();
        //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                console.log(ajax.responseText);//输入相应的内容
            }
        }

$\color{red}{post}$ 请求：

        //创建异步对象  
        var xhr = new XMLHttpRequest();
        //设置请求的类型及url
        //打开xhr
        xhr.open('post', 'http://。。。');
        //post请求一定要添加请求头才行不然会报错
        //设置请求头，请求头的设置必须在xhr打开之后，并且在send之前
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //发送请求
        xhr.send();
        xhr.onreadystatechange = function () {
            // 这步为判断服务器是否正确响应
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        };

二、get请求和post请求的简单区别

1、GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。（GET参数通过URL传递，POST放在Request body中。）

2、post发送的数据更大

3、对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

4、post比get慢

5、一般post用于修改和写入数据，get用于搜索排序和筛选之类的操作，目的是资源获取和读取数据

三、baseURL

用于设置默认值，请求时会自动拼接上

    // 给axios设置baseURL
    axios.defaults.baseURL = ' https://www.easy-mock.com/mock/5cd62f927f8f72433eeaa0b9/api';

    let url = /film/getList';
    axios.get(url).then(res => {
        console.log(res);
    })

四、请求头

    // 设置请求头
    axios.defaults.headers['sessionToken'] = 'asdfasdfasdfasdf234234234234234';

五、跨域访问

1、跨域为什么不同访问?

同源策略：
跨域的产生来源于现代浏览器所通用的‘同源策略’，所谓同源策略，是指只有在地址的： 1. 协议名 2. 域名 3. 端口名均一样的情况下，才允许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不同源的情况下访问，就称为跨域。

2、解决办法

（1）服务器（后台）设置允许跨域

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

（2）浏览器设置跨域

（3）通过代理允许跨域

六、拦截器

1、前言

   页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。
   好在强大的axios为开发者提供了这样一个API：拦截器。
   拦截器分为 请求（request）拦截器和 响应（response）拦截器

2、首先通过axios.create创建一个axios实例

    // 创建axios对象
    let $axios = axios.create({
        baseURL: 'http://。。。'
    })

3、请求（request）拦截器

拦截处理后一定要return回去

    // 发送前拦截 request-请求
    $axios.interceptors.request.use(config => {
        // 添加请求头
        config.headers.sessionToken = 'asdfasdf234234234';
        return config;
    })

4、响应（response）拦截器

    // 数据返回后的拦截 response-响应
    $axios.interceptors.response.use(function (res) {
        if (res.data.code === '666') {
            return res.data;
        } else {
            alert(res.data.msg);
        }
    }, function (error) {
        alert('网络异常');
    })

5、调用

    async function getList() {
        let res = await $axios.get('/city/getList');
        console.log(res);
    }
    getList();