axios学习笔记（1）

1.什么是axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

实质上返回一个promise对象，常使用ascync和await来操作获取数据

await返回的promise对象里面的值

使用原生ajax发送get请求

const xhr=new XMLHttpRequest()
      xhr.open('get','http://127.0.0.1:8080/posts')
      xhr.send()
      xhr.onreadystatechange()=function(){
        if(xhr.readyState===4){
            if(xhr.status>=200&&xhr.status<300){console.log(xhr.response)}
            else{console.log(xhr.status)}
          }
      }

例1：使用axios发送get请求

import axios from 'axios'
ascync function(){
const response =await axios.get('http://127.0.0.1：8080')
console.log(response)
}

2.安装和使用axios

npm i axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3.使用axios发起get请求

axios(          
{method: 'get',            
url:'http://127.0.0.1:8080/posts',       
 }).then(response=>{console.log(response);    
 })

或者使用封装的API axios.get()如上例1所示

method的默认值为get请求，如果不指定method，则将发送get请求

URL为指定发送请求的服务端地址

因为axios是一个基于promise的请求库，所以其能使用promise中的then和catch方法

axios(
          {method: 'get',
            url:'http://127.0.0.1:8080/posts',
        }).then(response=>{
          console.log(response);
        }).catch(err=>{console.log(err)})

4.发起post请求

与get请求不同的是post请求需要指定data作为传输的对象

axios.post(
          'http://127.0.0.1:8080/posts',
          {title:'aimingruzi',
                  author:'lisang'}
        ).then(response=>{console.log(response);})

axios(         
{			method: 'PSOT',          
			url:'http://127.0.0.1:8080/posts',
			data:{
			title:'name',
			author:'lisang'
			}
            }).then(response=>{console.log(response);       	
            }).catch(err=>{console.log(err)})

5.Axios的API

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

对于config

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}

axios为http的8种请求方法都封装了各自的API

本文选取了常用的post和get方法的API进行了介绍，其代码在上述例子中

注意

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

6.Axios实例

可以通过create方法自定义配置新建一个实例

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

7.请求配置

Axios在创建请求时可以的配置选项，其中只有url是必须的。

请求配置 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

可以在该文档中查看可用配置

全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

例子如下

  axios.defaults.method='get'
      axios.defaults.baseURL='http://127.0.0.1:8080'
      const first=document.querySelector('#first')
      first.addEventListener('click',function(){
        axios(
          {
            url:'/posts'
        }).then(response=>{
          console.log(response);
        })
      })

可以通过上述方法等一类方法来指定axios的默认参数

8.默认配置

您可以指定默认配置，它将作用于每个请求。

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

实例如下

const get_name=axios.create({
    baseURL:'http://127.0.0.1:8080',
    timeout:2000
  })
  get_name({
    url:'posts'
  }).then(response=>{console.log(response);})

get_name与axios对象的功能几乎一致

配置的优先级

配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。下面有一个例子。

// 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();

// 重写库的超时默认值
// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
instance.defaults.timeout = 2500;

// 重写此请求的超时时间，因为该请求需要很长时间
instance.get('/longRequest', {
  timeout: 5000
});

本文参考axios官方实例，后续内容不定期更新