axios官方文档翻译成中文文档

2024-04-28 04:18
文章标签 文档 中文 axios 官方 翻译成

本文主要是介绍axios官方文档翻译成中文文档，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

axios 文档翻译

大家好，我是梅巴哥~

正在用react写一些项目，但是很多需要用到的知识，没有合适的中文文档可以查看和学习。

于是就有了自己翻译官方文档的想法。

我英语水平一般，很多单词不认识，都是靠百度和搜集相关资料查到的。如有错误，欢迎在评论里批评指正。希望这篇文档对大家在axios方面的学习，能有所帮助。

补充： 我翻译都发在博客了，竟然在搜react-axios时，又找到了一个中文文档。大家也可以直接看这个。

1，概述

基于Promise的http库，适用于浏览器和node.js。

特点：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http请求
  • 支持promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换json数据
  • 客户端支持抵御XSRF（跨站请求伪造）
2，安装

用npm：

​ npm install axios

用bower：

​ bower install axios

用cdn：

​ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

用ES6的import引入：

​ import axios from 'axios'

3，示例
  • 执行一个GET请求：
const axios = require('axios')// 给用户创建一个带有id的请求
axios.get('/user?ID=12345').then(function (res) {// 处理成功console.log(res)}).catch(function (err) {// 处理出错console.log(err)})

上面的代码还可以这样写，这种写法是带有配置属性的：

axios.get('/user', {params: {ID: 12345}
})
.then(function (res) {console.log(res)})
.catch(function (err) {console.log(err)})
  • 执行一个POST请求：
axios.post('/user', {firstName: '迪丽',lastName: '热巴'
})
.then(function (res) {console.log(res)})
.catch(function (err) {console.log(err)})
  • 同时执行多个请求：
function getUserAccount() {return axios.get('/user/12345')
}
function getUserPermissions() {return axios.get('/user/12345/permissions')
}axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {// 两个请求都完成了
}))
4， axios API

可以通过向 axios 传递相关配置来创建请求

axios(config)

// 发送一个POST请求
axios({method: 'post',url: '/user/12345',data: {firstName: '迪丽',lastName: '热巴'}
})

// 发送GET请求获取远程图片
const axios = require('axios');
const fs = require('fs')axios({method: 'get',// 图片的urlurl:  'https://bkimg.cdn.bcebos.com/pic/aec379310a55b319aea21ada4aa98226cefc17c1?x-bce-process=image/resize,m_lfit,h_452,limit_1',responseType: 'stream'
})
.then(function (res) {// 获取响应结果，并生成一个jpg文件res.data.pipe(fs.createWriteStream('dilireba.jpg'))})

在代码目录下生成一个dilireba.jpg照片文件：

在这里插入图片描述

双击打开就可以看到图片内容：

在这里插入图片描述

axios(url [, config])

// 发送一个GET请求 （默认方法）
// 为啥是默认的？可以查看第9条的请求配置
axios('/user/12345')
5，请求方法的别名

为方便起见，为所有支持的请求方法提供了别名：

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

*注意：

在使用这些别名方法时，url , method, 和 data 属性不需要在配置中专门指定。

6, Concurrency 并发

处理并发的助手函数：

axios.all(iterable)

axios.spread(callback)

提示：回看第三点给出的并发的例子里，有这两个助手函数的应用示例。

7，创建axios实例

创建一个新的带有自定义配置的axios：

axios.create([config])

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

可用的实例方法展示如下，指定的配置将与实例配置合并：

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])
9，请求配置

以下示例里 ，都是发送请求时可用的配置选项。

这里 只有url是必须要写的。如果没有指定的方法，请求将会默认以GET形式发送。

(在第4条的最后有默认get方法举例.)

{// url 是用于请求的服务器URLurl: '/user',// method 是用于创建请求时的请求方法method: 'get', //默认是get// baseURL将会被加在url前面，除非url是绝对的或者完整的地址//它可以很方便的为一个传递相对路径给axios实例的方法设置一个baseURLbaseURL: 'https://some-domain.com/api/',//transformRequest允许在它发送给服务端前，修改请求数据//但是仅适用于 'PUT', 'POST', 和 'PATCH'请求方法//数组中的最后一个函数返回一个字符串，Buffer实例，或者ArrayBuffer,//FormData 或者 Stream//你可以跳转headers对象。transformRequest: [function (data, headers) {// 做你想做的任何数据转换return data}],// transformResponse允许在传递给then或catch之前，修改响应数据 transformResponse: [function (data) {// 做你想做的任何数据转换return data}],// headers是即将被发送的自定义请求头headers: {'X-Requested-With': 'XMLHttpRequest'},// params是与请求一起发送的URL参数// 它必须是一个无参数对象或者一个URLSearchParams对象params: {ID: 12345},// paramsSerializer是一个管理序列化参数的可选函数paramsSerializer: function (params) {return Qs.stringify(params, {arrayFormat: 'brackets'})},// data是作为请求体发送的数据// 仅适用于'PUT', 'POST', 和 'PATCH'的请求方法中// 在没有设置 `transformRequest` 时，必须是以下类型之一：// - string, plain object, ArrayBuffer, ArrayBufferView, // URLSearchParams// - 浏览器专属：FormData, File, Blob// - Node 专属： Streamdata: {firstName: '迪丽热巴'},// timeout用于指定请求超时的毫秒数// 如果请求时间超过了指定的毫秒数，就会终止请求timeout: 1000, //默认是0（没有请求超时的时间）// withCredentials表示跨域请求时是否需要凭证withCredentials: false, //默认不需要// adapter允许自定义处理可以让测试更简单的请求// 返回一个promise并提供一个有效的响应adapter: function (config) {},// auth表示需要使用HTTP基础验证，并提供证明，比如账户密码// 这将设置一个Authorization请求头，重写现有的任意使用 `headers` 设置// 的自定义 `Authorization`头auth: {username: '小明',password: 'hahh123'},// responseType表示服务端将会以'arraybuffer', 'blob', 'document',// 'json', 'text', 'stream'中的哪种数据类型来响应responseType: 'json', // 默认是json// responseEncoding表示响应的编码形式// 注意：已忽略stream响应类型或客户端请求responseEncoding: 'utf8',// xsrfCookieName是用作xsrf值的cookie名称xsrfCookieName:  'XSRF-TOKEN', //默认的// xsrfHeaderName是用作xsrf值的请求头名称xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的// onUploadProgress允许处理上传进度事件onUploadProgress: function (progressEvent) {// 对原生进度事件进行处理},// onDownloadProgress允许处理下载进度事件onDownloadProgress: function (progressEvent) {// 对原生下载事件进行处理},// maxContentLength定义了http响应内容的最大字节数maxContentLength: 2000,// validateStatus定义了对于一个给定的HTTP响应状态码，是resolve还是reject// 如果validateStatus返回true或null或undefined，就会// 显示resolve。 反之，就会显示reject。validateStatus: function (status) {return status >= 200 && status < 300; // 默认的},// maxRedirects定义了follow的最大重定向数量。maxRedirects: 5, //默认是5// socketPath定义了在node.js中使用的UNIX接口socketPath: null, // 默认为null// httpAgent和httpsAgent定义了在node.js中，用http和https请求时各自的// 自定义代理。httpAgent: new http.Agent({ keepAlive: true }),httpsAgent: new https.Agent({ keepAlive: true }),// proxy定义代理服务器的主机名称和端口// auth表示 HTTP 基础验证应当用于连接代理，并提供凭据proxy: {host: '127.0.0.1',port: 9000,auth: {username: 'mikeymike',password: 'rapunz3l'}},// cancelToken 定义了可以用来取消请求的cancel tokencancelToken: new CancelToken(function (cancel) {})
}
10， Response Schema 响应模式

对于一个包含如下信息的请求给出响应：

{// data是服务端提供的响应数据data: {},// status是从服务端响应中得到的HTTP状态码status: 200,// statusText是从服务端响应中得到的HTTP状态信息statusText: 'OK',// headers是服务器响应的头headers: {},// config是为请求提供给axios的配置config: {},// request就是引起这次响应的请求request: {}
}

当使用then时，你就会收到如下响应：

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);});

如果使用了catch，或者通过一个拒绝服务的回调函数，你就会收到一个抛出错误的对象，来解释错误出现在哪里。

11，Config Defaults 默认配置

你给每个用到的请求设置指定的默认配置。

  • Global axios defaults 全局默认配置

    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';

  • Custom instance defaults自定义实例的默认配置

    // 创建实例时，设置默认配置
const instance = axios.create({baseURL: 'https://api.example.com'
});// 创建实例后，修改默认配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

  • Config order of precedence配置的优先级顺序

    配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。示例如下：

    // 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {timeout: 5000
});
12，Interceptors 拦截器

在请求或响应被then或catch处理前，你可以拦截这些请求或响应。

// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求前做一些事情return config}, function (err) {return Promise.reject(err)
})// 添加一个响应拦截器
axios.interceptors.response.use(function (res) {return res
}, function (err) {return Promise.reject(err)
})

如果你需要移除一个拦截器，

const myInterceptor = axios.interceptors.request.use(function () {...})
axios.interceptors.request.eject(myInterceptor)

你可以给一个自定义axios实例添加拦截器，

const instance = axios.create()
instance.interceptors.request.use(function() {...})
13，Handling Errors处理错误
axios.get('/user/12345').catch(function (error) {if (error.response) {// 创造请求并且服务器给出一个带状态码的响应console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else if (error.request) {// 创造了请求但是没有收到响应// `error.request` 是在浏览器中XMLHttpRequest和在node.js中//  的http.ClientRequest的一个实例console.log(error.request);} else {//设立请求时触发了错误提示console.log('Error', error.message);}console.log(error.config);});

你可以用alidateStatus配置项定义一个自定义的HTTP状态码错误范围：

axios.get('/user/12345', {validateStatus: function (status) {return status < 500}
})
14，Cancellation 取消

你可以用一个cancel token 取消请求

The axios cancel token API is based on the withdrawn cancelable promises proposal.

  • **创建方法一：**你可以用CancelToken.source创建一个cancel token ，示例如下：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/user/12345', {cancelToken: source.token
}).catch(function (thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {//处理错误信息}
});axios.post('/user/12345', {name: 'new name'
}, {cancelToken: source.token
})// 取消该请求 (信息参数是可选的)
source.cancel('Operation canceled by the user.');

  • 创建方法二：你也可以通过CancelToken构造函数来创建cancel token

    const CancelToken = axios.CancelToken;
let cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// 执行函数executor接收一个取消函数作为参数cancel = c;})
});// 取消请求
cancel();

**提示：**你可以用同样的cancel token取消多个服务器请求

15，用application/x-www-form-urlencoded格式

axios自动的把JS对象序列化到JSON。你可以用下列选项中的一个，来发送在application/x-www-form-urlencoded格式中的数据

  • Browser

    在浏览器中，你可以像如下这样用URLSearchParams API

    const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

  • Node.js

    在node.js中，你可以像下面这样用querystring模块：

    const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

oken`取消多个服务器请求

15，用application/x-www-form-urlencoded格式

axios自动的把JS对象序列化到JSON。你可以用下列选项中的一个，来发送在application/x-www-form-urlencoded格式中的数据

  • Browser

    在浏览器中，你可以像如下这样用URLSearchParams API

    const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

  • Node.js

    在node.js中，你可以像下面这样用querystring模块：

    const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
补充说明

了解ajax和axios的关系，可以参考如下资料：

  • 细谈 axios和ajax区别
  • ajax和axios、fetch的区别
ajax的一些知识点也放这里吧
Ajax使用var xhr = new XMLHttpResponse()xhr.open('get', url)xhr.send()xhr.onreadystatechange = function() {​	console.log(xhr.responseText)}还有一种写法：xhr.onload = function() {​	console.log(responseText)}xhr.onload和xhr.onreadystatechange方法的区别前者不兼容低版本ie，不需要判断状态码，只被调用一次后者兼容低版本ie，需要判断状态码，会被调用多次（每次状态码变化都会调用）json字符串data转换为json对象：JSON.parse(data)json对象转换为json字符串：JSON.stringify(data)get请求：xhr.open('get', url?name=dilireba&age=18)post请求：xhr.open('post', url)xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send('name=dilireba&age=18')ajax状态码xhr.readyState0：请求未初始化（还没调用open())1：请求已建立，但是还没有发送（还没调用send())2：请求已经发送3：请求正在处理，通常响应中已经有部分数据可以用了4：响应已经完成，可以获取并使用服务器的响应了低版本ie缓存问题请求地址不发生变化的情况下，只有第一次请求会真正发送到服务端，后续的请求都会从浏览器的缓存中获取结果。即使服务器数据更新了，前端拿到的数据一九i是缓存中的旧数据。解决方法在请求地址后面加随机数字xhr.open('get', 'http://www.something.com?t=' + Math.random())或者在请求地址后面加时间戳xhr.open('get', 'http://www.something.com?t=' + Date.now())

以上。

这篇关于axios官方文档翻译成中文文档的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/942310。

相关文章

中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
vscode中文乱码问题，注释，终端，调试乱码一劳永逸版

vscode中文乱码问题，注释，终端，调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题，很多方法都试了，注释乱码解决了，终端又乱码，调试窗口也乱码，最后经过本人不懈努力，终于全部解决了，现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一，所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版：使用utf8-确定-然后按指示重启 2.vscode
阅读更多...
解决Office Word不能切换中文输入

解决Office Word不能切换中文输入

我们在使用WORD的时可能会经常碰到WORD中无法输入中文的情况。因为，虽然我们安装了搜狗输入法，但是到我们在WORD中使用搜狗的输入法的切换中英文的按键的时候会发现根本没有效果，无法将输入法切换成中文的。下面我就介绍一下如何在WORD中把搜狗输入法切换到中文。
阅读更多...
Adblock Plus官方规则Easylist China说明与反馈贴（2015.12.15）

Adblock Plus官方规则Easylist China说明与反馈贴（2015.12.15）

-------------------------------特别说明--------------------------------------- 视频广告问题：因Adblock Plus的局限，存在以下现象，优酷、搜狐、17173黑屏并倒数；乐视、爱奇艺播放广告。因为这些视频网站的Flash播放器被植入了检测代码，而Adblock Plus无法修改播放器。 如需同时使用ads
阅读更多...
Python脚本：TXT文档行数统计

Python脚本：TXT文档行数统计

count = 0 #计数变量file_dirs = input('请输入您要统计的文件根路径：')filename = open(file_dirs,'r') #以只读方式打开文件file_contents = filename.read() #读取文档内容到file_contentsfor file_content in file_contents:
阅读更多...
bcolz文档

bcolz文档

原文:http://bcolz.blosc.org/en/latest/reference.html First level variables bcolz.__version__'''bcolz包的版本。''' bcolz.dask_here'''是否检测到dask的最低版本。''' bcolz.min_dask_version'''需要dask的最低版本(dask是可选
阅读更多...
sqlite不支持中文排序，采用java排序

sqlite不支持中文排序，采用java排序

方式一 不支持含有重复字段进行排序 /*** sqlite不支持中文排序，改用java排序* 根据指定的对象属性字段，排序对象集合，顺序* @param list* @param field* @return*/public static List sortListByField(List<?> list,String field){List temp = new ArrayList(
阅读更多...
WordPress开发中常用的工具或api文档

WordPress开发中常用的工具或api文档

http://php.net/ http://httpd.apache.org/ https://wordpress.org/ https://cn.wordpress.org/ https://core.svn.wordpress.org/ zh-cn:开发者文档： https://codex.wordpress.org/zh-cn:%E5%BC%80%E5%8F%91%E8%80%
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2