1.npm官方文档:https://www.npmjs.com/package/axios

2.axios:用于 浏览器node.js的基于Promise的HTTP客户端 请求

特征

  • 从浏览器制作XMLHttpRequests
  • HTTP从node.js的请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换为JSON数据
  • 客户端支持防止XSRF

3.npm使用:安装axios

npm install axios -D

4.axios请求与响应方法:

4.1.axios请求方法:

(1)执行 GET 请求

// 为给定 ID 的 user 创建请求

axios.get('/user?ID=12345').then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

// GET 参数可以放到params里(推荐)

axios.get('/user', {
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

(2)执行 POST 请求

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

☆ axios#get(url[, config]) 与 axios#post(url[, data[, config]]) 的请求配置项config:

下面是创建请求时可用的配置选项,注意只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

{
// `url` 是用于请求的服务器 URL
url: "/user", // `method` 是创建请求时使用的方法
method: "get", // 默认是 get // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: "https://some-domain.com/api/", // `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 "PUT", "POST" 和 "PATCH" 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理 return data;
}], // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理 return data;
}], // `headers` 是即将被发送的自定义请求头
headers: {"X-Requested-With": "XMLHttpRequest"}, // `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
}, // `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: "brackets"})
}, // `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 "PUT", "POST", 和 "PATCH"
// 在没有设置 `transformRequest` 时,必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属:FormData, File, Blob
// - Node 专属: Stream
data: {
firstName: "Fred"
}, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout: 1000, // `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的 // `adapter` 允许自定义处理请求,以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
}, // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: "janedoe",
password: "s00pers3cret"
}, // `responseType` 表示服务器响应的数据类型,可以是 "arraybuffer", "blob", "document", "json", "text", "stream"
responseType: "json", // 默认的 // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: "XSRF-TOKEN", // default // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
xsrfHeaderName: "X-XSRF-TOKEN", // 默认的 // `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// 对原生进度事件的处理
}, // `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
}, // `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000, // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认的
}, // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0,将不会 follow 任何重定向
maxRedirects: 5, // 默认的 // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
// `keepAlive` 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }), // "proxy" 定义代理服务器的主机名称和端口
// `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
// 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
proxy: {
host: "127.0.0.1",
port: 9000,
auth: : {
username: "mikeymike",
password: "rapunz3l"
}
}, // `cancelToken` 指定用于取消请求的 cancel token
// (查看后面的 Cancellation 这节了解更多)
cancelToken: new CancelToken(function (cancel) {
})
}

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

// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(function(response) {
console.log(response)
});
// GET 请求远程图片
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
}).then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

4.2.axios响应方法:axios的响应包含以下信息

{
// `data` 由服务器提供的响应
data: {}, // `status` HTTP 状态码
status: 200, // `statusText` 来自服务器响应的 HTTP 状态信息
statusText: "OK", // `headers` 服务器响应的头
headers: {}, // `config` 是为请求提供的配置信息
config: {}
}

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

错误处理:

axios.get("/user/12345").catch(function (error) {
if (error.response) {
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else {
// 设置请求时发生错误,导致出现错误
console.log("Error", error.message);
}
console.log(error.config);
});

###关于 axios 中文转码

axios.get('http://www.baidu.com?q=关键字').then(function(data){ })

||
\/

axios.get('http://www.baidu.com?q='+encodeURI('关键字')).then(function(data){})

5.axios抓取数据栗子

nodejs-5.2 axios请求的更多相关文章

  1. 解决axios请求本地的json文件在打包后路径出错问题

    vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,在Hbuilder编辑器打开,页面报错404: 在浏览器打开的路径 http:/ ...

  2. axios [æk'si:əʊs] 及 axios 请求配置

    特征 比Jquery轻量,但处理请求不多的时候,可以使用 基于Promise语法标准 支持nodejs 自动转换JSON数据 用法 get // Make a request for a user w ...

  3. ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  4. Nodejs Http发送post请求

    Nodejs  Http发送post请求 var http = require('http'); function epay(params) { console.log(" COME IN& ...

  5. 转: Nodejs 发送HTTP POST请求实例

    项目里面需要用到使用NodeJs来转发HTTP POST请求,把过程记录一下: exports.sendEmail = function (req, res) { res.send(200, req. ...

  6. Vue框架axios请求(类似于ajax请求)

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  7. 10. vue axios 请求未完成时路由跳转报错问题

    axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...

  8. axios请求本地的json文件在打包部署到子目录域名下,路径找不到

    前言: 因为要同时部署两个项目,有一个是部署到域名下面的子目录下,如:https://xxx.com/siot-admin vue 项目中使用axios请求了本地项目的static文件夹下的json文 ...

  9. 记录一次axios请求造成的数组初始化失败

    axios请求是一个异步的请求,简单来讲就是在做其他事情的时候可以把这个先放一边等其他的事情做完后再来做这件事件. 我之前这样调用了一个方法: mounted() { this.first() thi ...

随机推荐

  1. 《C++标准程序库》学习笔记(一)C++相关特性

    抱着本厚厚的<C++标准库>读了几天,想想也该写点关于用法的总结,一来怕今后容易忘记,二来将书上的事例重新敲一遍,巩固对程序库相关知识的了解.今天开第一篇,以后不固定更新.当然,笔者所读为 ...

  2. Jquery getJSON方法分析

    准备工作 ·Customer类 public class Customer {     public int Unid { get; set; }     public string Customer ...

  3. 远离压力,提高效率——Getting things done读书笔记

    一.确定时间.空间和工具   二.收集阶段:填充工作篮         1. 这有助于你认识到自己面对的工用量.         2. 同时让你清楚"隧道的终点"在哪        ...

  4. java设计模式--观察者模式(Observer)

    java设计模式--观察者模式(Observer) java设计模式--观察者模式(Observer) 观察者模式的定义: 定义对象间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖于它的 ...

  5. Oracle面试过程中常见的二十个问题

    1.冷备份和热备份的不同点以及各自的优点  解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备份时, ...

  6. Access Treeview树节点代码二

    Private Sub Form_Load() '引用C:\windows\system32\MSCOMCTL.OCX,否则提示出错. Dim Rec As New ADODB.Recordset D ...

  7. Java 重入锁 ReentrantLock 原理分析

    1.简介 可重入锁ReentrantLock自 JDK 1.5 被引入,功能上与synchronized关键字类似.所谓的可重入是指,线程可对同一把锁进行重复加锁,而不会被阻塞住,这样可避免死锁的产生 ...

  8. Ocelot中文文档-日志

    目前,Ocelot使用标准的日志记录接口ILoggerFactory/ILogger . 在IOcelotLogger / IOcelotLoggerFactory中提供了标准的asp.net cor ...

  9. Coursera-AndrewNg(吴恩达)机器学习笔记——第一周

    一.初识机器学习 何为机器学习?A computer program is said to learn from experience E with respect to some task T an ...

  10. Quartz学习-- quartz基本介绍和 Cron表达式

    Quartz学习 一. Quartz 大致简介 Quartz 是完全由 java 开发的一个开源的任务日程管理系统 ​任务日程管理系统 换句话说就是: ​ 一个预先确定的日程时间到达时,负责执行任务的 ...