ajax使用简介

---

前言

最近因为需要学习web项目的编写，需要用到axios请求，虽然看上去很简单但有不少细节需要注意，我也在上面踩了不少坑。在查阅了不少资料之后，我准备整理一下关于axios请求的知识。

---

一、axios是什么？

• 在了解axios之前，先了解一下ajax是什么？

  • ajax（asynchronous javascript and xml），异步的JavaScript和XML
  • ajax是一种技术，通过浏览器内置对象（XMLHttpRequest）和服务器进行数据交互的技术

• ajax的优点

  • 可以在不重新刷新页面的情况下与服务器通信、交换数据、更新数据等
  • 举个简单的例子，比如下图是我用react写出来的一个页面，图中的列表是页面上一个相对独立的组件，我用ajax发送请求，获得的数据传入这个列表，列表里的数据会动态更新，但这个整个浏览器的页面并不会一起更新，这就极大地提高了用户的使用体验
    

• ajax几种使用方法

  • jQuery封装的ajax（想用就必须引入jQuery框架）
  • 原生的XMLHttpRequest（实现复杂）
  • axios（当前最常用的方式）

• 所以，简单地说，为了简单地使用ajax这个好东西，axios就出现了。axios是一个封装了ajax的请求库（内部是原生的XMLHttpRequest），基于Promise的HTTP库。由于其相对灵活的使用和强大的功能，react/vue官方都推荐使用axios发送ajax请求

注：Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法（详细请参考其他的文章）。

二、使用解析

1.常用API([] 表示可选的参数)

• axios(config)
• axios.get(url [config])
• axios.post(url [data] [config])
• axios.put(url [data] [config])
• axios.delete(url [data] [config])

2.API参数详解

• 先给出一个例子

const resp = await axios.post
(`http://localhost:8080/insert`,
values,
{headers:{ 'Content-Type': 'multipart/form-data'}})
可以看作 
axios.post
(url,
data,
config)

• url
  这个就是你发请求的地址，你从服务器获取数据的访问地址
• data
  这存放着你需要发送回服务器的数据，最主要的这个数据的格式，这里有很多注意的地方，因为前端传回的数据格式未必是后端要求的那个，这可能导致传输数据出错
  详情可以参考我的这篇文章：前端数据格式解析 json，form（application/json、application/x-www-form-urlencoded、multipart/form-data）
• config

这是一个整体，里面又可以包含多个参数
{
 url:`http://localhost:8080/insert` #这是绝对地址的写法
 
 url:'/insert' #这是相对地址的写法 （相对与绝对取决与baseURL 这个参数）
 
 baseURL:'http://localhost:8080'  
 
	注：分界线以上的为常用参数
    ---------------------------------------------------------------------------------------- 
    注：分界线以下的按需设置
    
  //transformRequest允许请求的数据在发送至服务器之前进行处理，这个属性只适用于put、post、patch方式
    //数组的最后一个函数必须返回一个字符串或者一个'ArrayBuffer'或'Stream'或'Buffer' 实例或'ArrayBuffer'，'Formdata'，
    //若函数中用到了headers，则需要设置headers属性    
    transformRequest: [function(data,headers){
        //根据需求对数据进行处理
        return data;
    }],   
    
    
    //transformResponse允许对返回的数据传入then/catch之前进行处理    
    transformResponse:[function(data){
        //依需要对数据进行处理
        return data;
    }],   
    
    //headers是自定义的要被发送的信息头
    headers: {'X-Requested-with':'XMLHttpRequest'},
        
    //params是请求连接中的请求参数，必须是一个纯对象
    params:{
      ID:12345  
    },    
    
    //paramsSerializer用于序列化参数
    paramsSerializer: function(params){
      return Qs.stringify(params,{arrayFormat:'brackets'});  
    },     
    
    //data是请求时作为请求体的数据——request.body
    //只适用于put、post、patch请求方法
    //浏览器:FormData，File，Blob;Node:stream
    data:{
      firstName: 'simon',  
    },    
    
    //timeout定义请求的时间，单位是毫秒，如果请求时间超过设定时间，请求将停止
    timeout:1000,
        
    //withCredentials表明跨跨域请求书否需要证明。
    withCredentials:false, //默认值
        
    //adapter适配器，允许自定义处理请求
    //返回一个promise
    adapter:function(config){
        /*...*/
    },    
     
    //auth表明HTTP基础的认证应该被使用，并提供证书
    auth:{
      username:'simon',
      password:'123456',    
    },    
    
    //responseType表明服务器返回的数据类型，这些类型包括：json/blob/document/ 		arraybuffer/text/stream    
     responseType: 'json',   
         
     //proxy定义服务器的主机名和端口号
     //auth属性表明HTTP基本认证应该跟proxy相连接，并提供证书
     //这将设置一个'Proxy-Authorization'头(header)，覆盖原来自定义的
     proxy:{
         host:127.0.0.1,
         port:8080,
         auth:{
             username:'simon',
             password:'123456'    
         }    
     },   
     
     //取消请求
     cancelToken: new CancelToken(cancel=>{})    
}

---

总结

本文简单地解释了Ajax的简单使用，若有错误还请指出