axios是什么

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。

Axios特性

1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

Axios用在什么场景？

在特性里面已经有提到，浏览器发送请求，或者Node.js发送请求都可以用到Axios。像Vue、React、Node等项目就可以使用Axios，如果你的项目里面用了Jquery，此时就不需要多此一举了，jquery里面本身就可以发送请求。

获取数据（GET）

//获取按钮
const btns = document.querySelectorAll("button");
btns[0].onclick = function () {
  axios({
    method: "GET",
    url: "http://localhost:3000/posts/2",
  }).then(response => {
    console.log(response);
  });
};

提交数据（POST）

btns[1].onclick = function () {
  axios({
    method: "POST",
    url: "http://localhost:3000/posts",
    data:{
      title: "我是 ade kang",
      author: "ade kang"
    }
  }).then(response => {
    console.log(response);
  });
};

更新数据（PUT）

btns[2].onclick = function () {
  axios({
    method: "PUT",
    url: "http://localhost:3000/posts/3",
    data: {
      title: "我是 ade kang",
      author: "李四",
    },
  }).then(response => {
    console.log(response);
  });
};

注意这样修改，会将它id为3里面的数据全部修改

删除数据（DELETE）

btns[3].onclick = function () {
  axios({
    method: "DELETE",
    url: "http://localhost:3000/posts/3",
  }).then(response => {
    console.log(response);
  });
};

其他请求

//获取按钮
const btns = document.querySelectorAll("button");
//发送 GET 请求
btns[0].onclick = function () {
  // axios()
  axios.request({
      method: "GET",
      url: "http://localhost:3000/comments",
    })
    .then(response => {
      console.log(response);
    });
};
//发送 POST 请求
btns[1].onclick = function () {
  // axios()
  axios.post("http://localhost:3000/comments", {
      body: "喜大普奔",
      postId: 2,
    })
    .then(response => {
      console.log(response);
    });
};

请求配置（Request Config）

url:请求地址

method:请求类型

baseURL:url的基础结构 例如http://localhost:3000

transformRequest

transformResponse：对响应的结果做出改变，然后回调处理结果，做预处理

headers：请求头的处理地方

params:请求的参数，配置的是一个对象

axios({
    url: '/post',
    //  /post?a=100&b=200
    //  /post/a/100/b/200
    //  /post/a.100/b.200
    params: {
        a:100,
        b:200
    }
})

paramsSerializer：参数序列化

timeout：超时时间

withCredentials：跨域时当为true允许携带cooki

validateStatus:对响应成功时做出设置

proxy：设置代理

  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

默认配置

//获取按钮
const btns = document.querySelectorAll('button');
//默认配置
axios.defaults.method = 'GET';//设置默认的请求类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:1};
axios.defaults.timeout = 3000;//
btns[0].onclick = function(){
    axios({
        url: '/posts'
    }).then(response => {
        console.log(response);
    })
}

创建实例对象发送实例请求

//创建实例对象  /getJoke
const duanzi = axios.create({
    baseURL: 'https://api.apiopen.top',
    timeout: 2000
});
duanzi.get('/getJoke').then(response => {
    console.log(response.data)
})

拦截器

// Promise
// 设置请求拦截器  config 配置对象
axios.interceptors.request.use(function (config) {
    console.log('请求拦截器 成功 - 1号');
    //修改 config 中的参数
    config.params = {a:100};
    return config;
}, function (error) {
    console.log('请求拦截器 失败 - 1号');
    return Promise.reject(error);
});
axios.interceptors.request.use(function (config) {
    console.log('请求拦截器 成功 - 2号');
    //修改 config 中的参数
    config.timeout = 2000;
    return config;
}, function (error) {
    console.log('请求拦截器 失败 - 2号');
    return Promise.reject(error);
});
// 设置响应拦截器
axios.interceptors.response.use(function (response) {
    console.log('响应拦截器 成功 1号');
    return response.data;
    // return response;
}, function (error) {
    console.log('响应拦截器 失败 1号')
    return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
    console.log('响应拦截器 成功 2号')
    return response;
}, function (error) {
    console.log('响应拦截器 失败 2号')
    return Promise.reject(error);
});
//发送请求
axios({
    method: 'GET',
    url: 'http://localhost:3000/posts'
}).then(response => {
    console.log('自定义回调处理成功的结果');
    console.log(response);
});

request后进先执行

response先进先执行