Vue--前端交互 axios

1. axios 的基本特性

axios是基于Promise用于浏览器和node.js的HTTP客户端

特征：

• 支持浏览器和node.js
• 支持 promise
• 能拦截请求和响应
• 自动转换JSON数据

2. axios 的基本用法

	axios.get('/adata').then(ret=>{
        console.log(ret.data)  //data属性固定，用于获取后台响应数据
    })

3. axios的参数传递

1.get

通过restful传递参数
也可以通过params选项传递参数

//restful
        axios.get('http://localhost:3000/axios/123')
            .then(function (ret) {
                console.log(ret.data);
            })

//params
        axios.get('http://localhost:3000/axios', {
                params: {
                    id: 789
                }
            })
            .then(function (ret) {
                console.log(ret.data);
            })

2.delete

与get传参类似

		axios.delete('http://localhost:3000/axios', {
                params: {
                    id: 111
                }
            })
            .then(function (ret) {
                console.log(ret.data);
            })

3.post

通过选项传递参数（默认传递json格式的数据）
传字符串的格式需要 new URLSearchParams();

//json  
        axios.post('http://localhost:3000/axios', {
                uname: 'lisi',
                pwd: 123
            })
            .then(function (ret) {
                console.log(ret.data);
            })

//字符串  
        var params = new URLSearchParams();
        params.append('uname', 'lisi');
        params.append('pwd', '111');
        axios.post('http://localhost:3000/axios', params)
            .then(function (ret) {
                console.log(ret.data);
            })

4.put

与post类似

		axios.put('http://localhost:3000/axios/123', {
                uname: 'lisi',
                pwd: 123
            })
            .then(function (ret) {
                console.log(ret.data);
            })

3. axios响应结果及全局配置

1.响应结果主要属性

• data 实际响应回来的数据
• headers 响应头
• status 响应状态码

2.Axios中全局配置

• 配置公共的基准URL axios.defaults.baseURL
• 配置超时时间 axios.defaults.timeout
• 配置公共的请求头 axios.defaults.headers.common[‘Authorization’]

//配置请求基准url
        axios.defaults.baseURL = 'http://localhost:3000/';
        axios.get('axios-json').then(function (ret) {
            console.log(ret.data.uname);
        })

4. axios 拦截器

1.请求拦截器

在请求发出之前设置一些信息

		axios.interceptors.request.use(function (config) {
                console.log(config.url);
                config.headers.mytoken = 'nihao';
                return config;
            },
            function (err) {
                console.log(err);
            })

2.响应拦截器

获取数据前对数据加工

	axios.interceptors.response.use(function (res) {
                // console.log(res);
                var data = res.data
                return data;
            },
            function (err) {
                console.log(err);
            })
        axios.get('http://localhost:3000/adata').then(function (data) {
            console.log(data)
        })

async/await的基本用法（es7引入，方便异步操作）

• async关键字用在函数上（async函数的返回值是promise实例对象）
• await关键字用于async函数中（await可以得到异步的结果）

 	async function queryData(id){
            const ret = await axios.get('/data');
            return ret;
        }
        queryData().then(ret=>{
            console.log(ret)
        })