Bootstrap

适合前端的网络请求模块: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 => {
   

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;