Vue中axios的基本用法详解_vue.js_

1.什么是axios?

axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

2.axios的特征

    从浏览器中创建 XMLHttpRequest
    从 node.js 发出 http 请求
    支持 Promise API
    拦截请求和响应
    转换请求和响应数据
    取消请求
    自动转换JSON数据
    客户端支持防止 CSRF/XSRF

3.axios在使用的时候需要注意的细节

引用 axios 时 Vue.prototype.axios = axios Vue.prototype.$axios = axios Vue.prototype.$http = axios 其实是都一个东西，只是vue的原型链上加个变量（且变量不同），值是axios对象 。

只是 一个是jquery封装过的异步调用方法 一个是vue推荐的第三方异步封装方法 他们都是调用的axios对象

只是调用的时候 axios.post({..}) this.$axios.post({...}) this.$http.post({....})

4.axios在vue中的实例运用(留言评论接口)

App.vue代码

mian.js代码

import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 导入axios 没有./ (axios网络请求工具:1不依赖dom,2.前后端都可以用,3. 丰富拦截,扩展功能,4可封装,复用性强) import axios from 'axios'; // 挂载到vue的全局(原型上),在每个组件都可以使用 ,prototype是固定的,$axios是自定义的 Vue.prototype.$axios = axios; // 指定默认的请求域名 axios.defaults.baseURL = "http://dida100.com:8888" // 给每个请求拦截一下,添加请求Token信息 axios.interceptors.request.use(function(config){ config.headers.Authorization = 'Bearer '+localStorage.getItem("token"); return config; }) // interceptors 拦截器 // request 请求 // config 配置 // headers头信息 // Authorization 权限 // defaults 默认 // baseURL 基础URL new Vue({ render: h => h(App), }).$mount('#app')

到此这篇关于Vue中axios的基本用法的文章就介绍到这了,更多相关Vue axios用法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！