前端系列课程之axios应用（一）

---

axios应用：

目标：

• 掌握axios的安装和引用
• 掌握axios服务器的请求方法
• 掌握axios拦截器的设置
• 掌握axios实战应用

Axios概述：

1. axios是一个第三方库，支持前后端发起的http请求
2. 官网
   http://www.axios-js.com/
3. 安装
   npm install axios –S

例子：

局部组件引用：



另外打开一个文件：

服务器端设置跨域请求： 这种方法不是很安全

//设置跨域请求,在 新建的APP.JS中
app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});

配置的文件内容：

全局引用：

axios引用方法：

1. 全局引用
   在main.js中导入axios，并设置axios为Vue的实例对象属性

2. 组件引用
   在组件的script中导入axios

局部引用的缺点：

整个项目中，很多都会有接口调用的需求，如果使用局部引用，都需要写，就会产生代码冗余。

axios的服务器请求方法：

axios的常用API方法：

• axios.get( )
• axios.post( )
• axios.put( )
• axios.delete( )
• axios.patch( )
• …

axios的get方法：

• axios.get(url[,data])
  .then( res=>{ })
  .catch( err=>{ })
• data参数可以在url中进行拼接，也可以以字面量对象方式独立存在，对象的属性名需要用params，服务端通过req.query接收

传参：

或者：（使用params方法）：

axios的post方法：

• axios.post(url[,data])
  .then( res=>{ })
  .catch( err=>{ })
• data参数以字面量对象方式独立存在，服务端通过req.body接收

添加新用户的服务器接口：

axios的跨域请求方案：

• 方法一：
  服务器端启用跨域

• 方法二：（客户端配置）
  配置vue.config.js

在根路径下创建：vue.config.js

module.exports = {
    devServer: {
        host: 'localhost',
        port: '8000',
        proxy: {
            '/api': {
                target: 'http://localhost:3000/',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

## 将所有域名http：//localhost:3000改为/api

axios的高级设置

axios的属性设：

• axios.defaults.baseURL属性设置
• axios.defaults.headers属性设置
  （1）axios.defaults.headers.common[“Authorization”] = token值
  （2）axios.defaults.headers.get[“Accepts”] = 返回编码值
  

axios拦截器设置：

1. 拦截器可以在http请求的开始和结束前进行拦截
2. 通过axios实例对象的interceptors属性对请求和响应对象进行拦截
3. 返回config时可以正常执行
   

axios的实战应用

axios实战应用：

1. 上传文件
2. TOKEN鉴权机制