开始
一个基于promise可以用于浏览器和node.js的网络请求库，可以允许在浏览器和node中。在node中使用http模块，在浏览器中使用ajax，使用
pnpm add axios进行安装
基础
axios实例
一般来说我们都通过axios实例来调用其方法。先创建一个实例配置参数，然后将这个实例导出，示例如下
const instance = axios.create({ // 这里设置一些通用配置，下面列举了可配置选项。更多的请参考官网 // `url` 是用于请求的服务器 URL， url: '/user', // 默认值， `method` 是创建请求时使用的方法 method: 'get', // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/', // 自定义请求头 headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` 是与请求一起发送的 URL 参数 // 必须是一个简单对象或 URLSearchParams 对象 params: { ID: 12345 }, // `data` 是作为请求体被发送的数据 data: { firstName: 'Fred' }, // `timeout` 指定请求超时的毫秒数。 timeout: 1000, // 默认值是 `0` (永不超时) // `withCredentials` 表示跨域请求时是否需要使用凭证 withCredentials: false, // default // `adapter` 允许自定义处理请求，这使测试更加容易。 // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。 adapter: function (config) { /* ... */ }, // `auth` HTTP Basic Auth auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` 表示浏览器将要响应的数据类型 // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream' // 浏览器专属：'blob' responseType: 'json', // 默认值 // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属) // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求 // Note: Ignored for `responseType` of 'stream' or client-side requests responseEncoding: 'utf8', // 默认值 // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称 xsrfCookieName: 'XSRF-TOKEN', // 默认值 // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称 xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值 // `onUploadProgress` 允许为上传处理进度事件 // 浏览器专属 onUploadProgress: function (progressEvent) { // 处理原生进度事件 }, // `onDownloadProgress` 允许为下载处理进度事件 // 浏览器专属 onDownloadProgress: function (progressEvent) { // 处理原生进度事件 }, }) export default instance // 导出实例
列举实例方法
下面列举了axios的实例方法，实例方法也可以配置，如下
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]]) axios.getUri([config]) // config就是实例化axios的那个配置，可以参考上面那个，这里进行第二次配置，会覆盖实例的配置 // 注：在使用别名方法时， url、method、data 这些属性都不必在配置中指定 /* 实例方法返回的结果是一个promise，可以通过then,catch，获取，或者通过await/async 获取 axios.get('/user?ID=12345').then().catch() async function getUser() { const response = await axios.get('/user?ID=12345'); } */
get
const axios = require('axios'); // 向给定ID的用户发起请求 axios.get('/user?ID=12345') // 上述请求也可以按以下方式完成（可选） axios.get('/user', { params: { ID: 12345 } })
post
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }); Promise.all(xxx1,xx2) // 由于返回的是promise 可以使用promise的一些api，比如any，all .then(function ([acct, perm]) { // ... });
其他的实例方法都类似
响应结构(response)
{ // `data` 由服务器提供的响应 data: {}, // `status` 来自服务器响应的 HTTP 状态码 status: 200, // `statusText` 来自服务器响应的 HTTP 状态信息 statusText: 'OK', // `headers` 是服务器响应头 // 所有的 header 名称都是小写，而且可以使用方括号语法访问 // 例如: `response.headers['content-type']` headers: {}, // `config` 是 `axios` 请求的配置信息 config: {}, // `request` 是生成此响应的请求 // 在node.js中它是最后一个ClientRequest实例 (in redirects)， // 在浏览器中则是 XMLHttpRequest 实例 request: {} } axios.get('/user/12345') .then(function (response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); });
默认配置
您可以指定默认配置，它将作用于每个请求
// 全局 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'; ----------------------------------------------------------------------------------------------- // 创建实例时配置默认值 const instance = axios.create({ baseURL: 'https://api.example.com' }); // 创建实例后修改默认值 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN; ------------------------------------------------------------------------------------------------ // 使用库提供的默认配置创建实例 // 此时超时配置的默认值是 `0` const instance = axios.create(); // 重写库的超时默认值 // 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时 instance.defaults.timeout = 2500; // 重写此请求的超时时间，因为该请求需要很长时间 instance.get('/longRequest', { timeout: 5000 });
拦截器
在请求或响应被 then 或 catch 处理前拦截它们
request
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });
response
// 添加响应拦截器 axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); });
请求体编码
application/x-www-form-urlencoded
是axios默认的选项，在浏览器中可以使用
URLSearchParamsAPI 示例如下const params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params);其实吧，如果请求头header
content-type: 'application/x-www-form-urlencoded'存在会自动编码的，示例如下const data = {; await axios.post('https://postman-echo.com/post', { name: '张三', age: 21 }, { headers: { 'content-type': 'application/x-www-form-urlencoded' } }); // 这样写的话无需手动编码data
multipart/form-data
标签：axios,请求,data,实例,config,response From： https://www.cnblogs.com/ProCheng/p/17397815.html 这种格式一般用于传输二进制文件和其他类型混合的数据，实例如下
const form = new FormData(); form.append('my_field', 'my value'); form.append('my_buffer', new Blob([1,2,3])); form.append('my_file', fileInput.files[0]); axios.post('https://example.com', form)或者提供内置的方法
postFormaxios.postForm('https://httpbin.org/post', { my_field: 'my value', my_buffer: new Blob([1,2,3]), my_file: fileInput.files // FileList will be unwrapped as sepate fields });其实吧，如果请求头header
content-type: 'multipart/form-data'存在会自动编码的，示例如下axios.post('https://httpbin.org/post', { user: { name: 'Dmitriy' }, file: fs.createReadStream('/foo/bar.jpg') }, { headers: { 'Content-Type': 'multipart/form-data' } }).then(({data})=> console.log(data));Axios支持以下别名方法：
postForm，putForm，patchForm，这些方法只是对应的 HTTP 方法，其 content-type 头部默认设为multipart/form-data// FileList 对象可以被直接传递： await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files) // 所有文件将使用相同的字段名files[]发送