脚本宝典收集整理的这篇文章主要介绍了VUE学习笔记--Axios,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Axios 是一个基于 Promise 的 HTTP 库,简洁、易用且高效的代码封装库。通俗的讲, 它是当下比较流行的一种 Ajax 框架,可以使用它发起 http 请求接口功能,它是基于 Promise 的,相比较 Ajax 的回掉函数能够更好的管理异步操作。
Axios 的特点:
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
首先使用 NPM 来安装 axios 的依赖,命令如下:
npm install axios
如果要全局使用 axios 就需要在 main.js 中设置,然后在组件中通过 this 调用,代码如下:
import axios from 'axios'
Vue.prototype.$axios = axios;//加载到原型上
我们完全可以通过调用axios的API,传递一个配置对象来发起请求:
发送 post 请求,参数写在 data 属性中,代码如下:
axios({
url: 'http://rap2api.taobao.org/app/mock/121145/post',
method: 'post',
data: {
name: '小月'
}}).then(res => {
console.log('请求结果:', res);});
发送 get 请求,默认就是 get 请求,直接第一个参数写路径,第二个参数写配置对 象,参
数通过 params 属性设置,代码如下:
axios('http://rap2api.taobao.org/app/mock/121145/get', {
params: {
name: '小月'
}}).then(res => {
console.log('请求结果:', res);});
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])
注意:在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
JSON-Server 的安装及使用
JSON-Server 是一个 Node 模块,运行 Express 服务器,我们可以指定一个 json 文件 作为 API 的数据源。简单理解为在本地创建了数据接口,使用 axios 来访问数据,使用步骤如下:
(1)首先 cmd 进入终端,在根目录下全局安装 json-server,命令如下:
npm install -g json-server
(2)在任意盘符中创建一个文件夹用于存放 json 数据文件,终端切换到该文件目录下, 执行初始化命令(一直回车即可):
npm init
(3)在初始化的项目中安装 json-server,执行如下命令:
npm install json-server --save
(4)我们在项目文件夹下就会看到一个 package.json 文件,然后在当前目录下新建一个( 如:db.json) 文件,在本文件下编写自己的 json 数据 。
(5)修改 package.json 数据,设置快捷启动 json-server 命令如下:
{
"name": "jsondemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"json:server": "json-server --watch db.json"
},
"author": "",
"license": "ISC",
"dependencies": {
"json-server": "^0.16.1"
}
}
接着我们利用 axios 访问 json-server 服务器中的数据,对数据列表进行增删查操作
跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器 对 JavaScript 实施的安全限制。 同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域。 如我们调用百度音乐的接口,来获取音乐数据列表,这必然会出现跨域问题,因为调用的并不是本地数据接口。百度音乐 的接口完整网址: http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&siz e=10&offset=0
在 Vue 中使用本地代理的方式进行跨域处理。首先在配置文件 config/index.js 里设置代理,在 proxyTable 中添加如下代码:
//config/index.js 部分代码省略
module.exports = {
dev: {
proxyTable: {
'/api': {
//目标路径,别忘了加 http 和端口号
target: 'http://tingapi.ting.baidu.com',
changeOrigin: true, //是否跨域 true 为跨域
pathRewrite: {
'^/api': '' //重写路径
}
}
}
}};
在 main.js 中,配置访问的 Url 前缀,这样每次发送请求时都会在 url 前自动添加/api 的路径,代码如下:
//全局设置基本路径 /api 代表 http://tingapi.ting.baidu.com 路径
axios.defaults.baseURL = '/api'
以上是脚本宝典为你收集整理的VUE学习笔记--Axios全部内容,希望文章能够帮你解决VUE学习笔记--Axios所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。