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. Mysql系列-数据库

    一 .数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组 ...

  2. linux 系统centOS 7 怎么在线安装mysql

    以下操作,注意空格,为避免出错,可以选择直接copy 第一步: 输入命令行      yum list installed | grep mysql       检查是否已经安装mysql 已安装输入 ...

  3. 【也许CTO并不是终点开篇】CTO也只不过是CTO罢了

    不想做将军的士兵不是好士兵,这句话可以有很功利的理解方式,对应到我们自己很可能是:不想做CTO的程序员不是好程序员!几年前对这句话的理解与现在有很多不同,因为我现在已经是一名中小型公司的CTO了,这句 ...

  4. 使用Navicat for MySQL把本地数据库上传到服务器

    服务器系统基本都是基于linux的,这个数据库上传的方式适用于linux的各种版本,比如Ubuntu和Centos(尽管这两个版本各种大坑小坑,但至少在数据库传输上保持了一致性) 当然本地数据库上传到 ...

  5. angular2项目如何使用sass

    angular/cli支持使用sass 新建工程: 如果是新建一个angular工程采用sass: ng new My_New_Project --style=sass 这样所有样式的地方都将采用sa ...

  6. arcengine之版本管理

    public void VersionManagement(IVersionedWorkspace versionedWorkspace) { //creating the new version o ...

  7. JavaScript (一、ECMAScript )

    一.js简介和变量 1.JavaScript的概述组成和特点 a.JavaScript 是脚本语言,是世界上最流行的编程语言,这门语言可用于 HTML 和 web,更可广泛 用于服务器.PC.笔记本电 ...

  8. vsts + XX云服务器构建netcore+docker持续集成交付部署

    持续集成交付部署是什么意思,它给我们带来什么好处? 先贴一张图 持续集成(Continuous Integration) 持续集成强调开发人员提交了新代码之后,立刻进行构建.(单元)测试(这个要看情况 ...

  9. Visual Studio 201~ Code 格式检查

    前言 好的代码格式,有利于阅读和查错,慢慢的有利于养成良好的编码习惯,也可以帮我们找出一些低级错误. StyleCop 在Nuget上搜索stylecop,选择MSBuild的那个版本,安装. 手动编 ...

  10. javascript中的隐式类型转化

    javascript中的隐式类型转化 #隐式转换 ## "+" 字符串和数字 如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话,+将进行拼接操作. 如果其中一个操作数是对 ...