Vue中axios的基本用法

目录

1.什么是axios?

2.axios的特征

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

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

App.vue代码

mian.js代码

---

 

1.什么是axios?

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

2.axios的特征

1.     从浏览器中创建 XMLHttpRequest
2.     从 node.js 发出 http 请求
3.     支持 Promise API
4.     拦截请求和响应
5.     转换请求和响应数据
6.     取消请求
7.     自动转换JSON数据
8.     客户端支持防止 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')