安徽盛绿建设网站,谷歌seo优化什么意思,建设购物网站需要多少钱,店铺网站怎么建axios和vue-resource一样#xff0c;是一个vue中操作http的插件#xff0c;遵循promise#xff0c;vue官方也推荐使用axios。 安装axios
npm i axios -S
axios也是在运行时需要的#xff0c;所以要保存在dependencies中。
引入axios
import axios from axios
Vue.proto… axios和vue-resource一样是一个vue中操作http的插件遵循promisevue官方也推荐使用axios。 安装axios
npm i axios -S
axios也是在运行时需要的所以要保存在dependencies中。
引入axios
import axios from axios
Vue.prototype.$http axios
GET、POST示例
templatedivrouter-link to/news tagdiv跳转到新闻页/router-linkrouter-link to/video跳转到视频页/router-linkrouter-view/div clickdataGetGET/divdiv clickdataPostPOST/div/div
/templatescript
export default {name: app,data () {return {addr: /data.json}},methods: {dataGet () {console.info(get)this.$http.get(this.addr, {params: {id: 1},headers: {token: token}}).then(res {console.info(res.data)}).catch(err {console.info(err)})},dataPost () {console.info(post)this.$http.post(this.addr, {id: 1}, {headers: {token: token}}).then(res {console.info(res.data)}).catch(err {console.info(err)})}}
}
/script
axios还有并发多个请求vue-resource不支持、拦截器、配置型请求类似jquery的ajax方法不列了一搜一大片实际使用过程中再慢慢补充吧。
全局设置与拦截器
全局设置 axios实例中的defaults对象下可以全局设置该实例的参数所有该实例的请求将使用此参数。 常用的三个
// 基础地址调用时会在每个请求前拼上这个地址
axios.defaults.baseURL API.protocols API.host / API.alias / API.version
// 超时时间
axios.defaults.timeout API.timeout
// Content-Type设为表单
axios.defaults.headers[Content-Type] application/x-www-form-urlencoded;charsetUTF-8
拦截器 axios中的拦截器可以全局拦截所有实例下的请求与响应在请求发出前与响应到达本地但返回给promise前可以做一系列公共的操作比如给请求参数统一加一个token可以用拦截器做。 下面例子是给请求加一系列参数那么每个请求只关注自己要传的业务参数就行公共参数就不需要单独写了。
// 请求全局处理
axios.interceptors.request.use(function (config) {const isExamine apiUtil.isExamine()if (config.method.toLowerCase() get) {// get方法// 获取get参数let params config.paramslet appid if (params.appid) {appid params.appid}let page if (params.page) {page params.page}let step if (params.step) {step params.step}// 实例化公共参数let commonParam new apiUtil.ApiCommonParam(appid, page, step)// 重置参数config.params {...commonParam,...params}// 测试期参数if (isExamine isExamine true) {config.params.isExamine true}} else if (config.method.toLowerCase() post) {// post方法// 获取post消息体let data config.dataconsole.info(data)let appid if (data.appid) {appid data.appid}let page if (data.page) {page data.page}let step if (data.step) {step data.step}// 重置参数let commonParam new apiUtil.ApiCommonParam(appid, page, step)let requestData {...commonParam,...data}// 测试期参数if (isExamine isExamine true) {requestData.isExamine true}// post默认使用payload方式提交数据会造成参数无法从request中解析需要把Content-Type设置为form之后再用qs库转换一下config.data qs.stringify(requestData)}return config
}, function (error) {return Promise.reject(error)
})
全局处理响应
// 全局响应
axios.interceptors.response.use(function (response) {return response
}, function (error) {return Promise.reject(error)
})
完整的全局设置与拦截器的代码示例 api/index.js
import Vue from vue
import axios from axios
import qs from qs
import {API} from /common/properties
import * as apiUtil from /common/script/apiUtilVue.prototype.$http axios// 基础地址调用时会在每个请求前拼上这个地址
axios.defaults.baseURL API.protocols API.host / API.alias / API.version
// 超时时间
axios.defaults.timeout API.timeout
// Content-Type设为表单,跨域时POST请求变为OPTIONS通过此项设置可解决
axios.defaults.headers[Content-Type] application/x-www-form-urlencoded;charsetUTF-8// 请求全局处理
axios.interceptors.request.use(function (config) {const isExamine apiUtil.isExamine()if (config.method.toLowerCase() get) {// get方法// 获取get参数let params config.paramslet appid if (params.appid) {appid params.appid}let page if (params.page) {page params.page}let step if (params.step) {step params.step}// 实例化公共参数let commonParam new apiUtil.ApiCommonParam(appid, page, step)// 重置参数config.params {...commonParam,...params}// 测试期参数if (isExamine isExamine true) {config.params.isExamine true}} else if (config.method.toLowerCase() post) {// post方法// 获取post消息体let data config.dataconsole.info(data)let appid if (data.appid) {appid data.appid}let page if (data.page) {page data.page}let step if (data.step) {step data.step}// 重置参数let commonParam new apiUtil.ApiCommonParam(appid, page, step)let requestData {...commonParam,...data}// 测试期参数if (isExamine isExamine true) {requestData.isExamine true}// post默认使用payload方式提交数据会造成参数无法从request中解析需要把Content-Type设置为form之后再用qs库转换一下config.data qs.stringify(requestData)}return config
}, function (error) {return Promise.reject(error)
})// 全局响应
axios.interceptors.response.use(function (response) {return response
}, function (error) {return Promise.reject(error)
})export default axios
main.js中引用
import ./api 简书中比较详细axios使用 https://www.jianshu.com/p/df464b26ae58
