axios、jsonp的使用

最新推荐文章于 2024-07-15 02:33:27 发布

原创最新推荐文章于 2024-07-15 02:33:27 发布 · 901 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了axios在浏览器和Node.js环境中的使用，包括其Promise支持、请求响应拦截、数据转换等功能。同时，文章讲解了如何安装axios，如通过npm、bower或CDN方式，并展示了如何在Vue.js项目中导入并使用axios进行GET请求、POST请求及JSONP跨域请求。此外，还介绍了如何获取本地JSON数据，并提供了防止CSRF攻击的特性。

axios特点：
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

npm安装

$ npm install axios

bower安装

$ bower install axios

通过cdn引入

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

导入axios

import axios from 'axios'
Vue.prototype.$http = axios;

使用axios

this.$http.get( url )
      .then(res=>{})
// 成功
      .catch(err=>{})
// 失败

get参数

this.$http.get( 
	url,
	{params:{page:2}}
)
 .then(res>{}) // 成功
.catch(err=>{}) // 失败

post请求

this.$http.post( 
	url,
	"k1=v1&k2=v2"，// 参数	
	{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
	// 设置url编码格式
)
 .then(res>{}) // 成功
.catch(err=>{}) // 失败

jsonp
本地json数据获取

把json拷贝到public 目录
发起ajax请求

this.$http.get('/js/youdata.json' )
      .then(res>{})
// 成功
      .catch(err=>{})
// 失败