适合前端的网络请求模块：axios学习全集

1. 什么是axios？

axios是一个基于promise的HTTP库，可以在浏览器和node.js中使用。promise是es6的语法，这对前端人员是非常友好的。

特性：

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求数据和相应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

2.axios的API

A. axios有一个API可以实现大部分的请求,可以通过向axios传递相关配置来创建请求：

• axios(config)

示例：

import axios from "axios";

//1.发送post请求
axios({
   
  method:"post",
  url:"请求的网址",
  date:{
   
    //使用post方法提交给服务器的数据
  }
})

//2.发送get请求，获取远端图片
axios({
   
  method:"get",
  url:"请求的网址",
  responseType:"stream"
}).then((response)=>{
   
  response.data.pipe(fs.createStream("xxx.jpg"))
})

注意：当使用axios(url[,config])时，若没有设置method属性，则默认是get请求。中括号参数表示可选。

//发送get请求（默认方法）
axios("/user/12345")

B. 但是为了在开发中方便区分，官方还是为所有请求方法提供了别名：

• axios.request(config)
• axios.get(url[,config])
• axios.delete(url[,config])
• axios.head(url[,config])
• axios.options(url[,config])
• axios.patch(url[data[,config]])
• axios.post(url[data[,config]])
• axios.put(url[data[,config]])

注意：在使用别名方法时，url、method、data这些属性都不必在配置中指定。

api使用示例1：（get请求）

axios.get("/user?id=12345").then(
  res => {
   
    console.log(res);
  },
  err => {
   
    console.log(err);
  }
);

//上面的请求也可以这样写
axios.get("/user", {
   
    params: {
   
      id: 1234
    }
  })
  .then(
    res => {
   
      console.log(res);
    },
    err => {
   
      console.log(err);
    }
  );

api使用示例2：（post请求，省略第三个参数config）

axios
  .post("/user", {
   
    name: "张三",
    age: 18
  })
  .then(
    res => {