文章目录axios简介axios的引入方式与配置axios的引入方式axios的配置.post和.getaxios一般写法axios关于默认配置axios的封装axios简介axios的含义：axios是一个基于Promise用于浏览器和nodejs的HTTP客户端axios具...

文章目录

• axios简介
• axios的引入方式与配置
• • axios的引入方式
  • axios的配置
  • • .post和.get
    • axios一般写法
  • axios关于默认配置
  • axios的封装

axios简介

• axios的含义：axios是一个基于Promise用于浏览器和nodejs的HTTP客户端
• axios具有的特征：
  1.从浏览器中创建XMLHTTPRequest
  2.从node.js发出http请求
  3.支持Promise API
  4.拦截请求和响应
  5.转换请求和相应数据
  6.取消请求
  8.自动转换JSON数据
  9.客户端支持防止CSRF/XSRF

axios的引入方式与配置

axios的引入方式

• 使用淘宝源

npm i/install axios

• 或者使用cdn

cnpm install axios

• 利用script标签src属性引入

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

axios的配置

• 在创建的vue框架中的main.js配置

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

• method方法的中的使用

export default{
	created:{
		this.postData();
		this.postData1();
		this.getDate()
	},
	methods:{
		<!--向指定的用户发出请求  -->
		postData(){
			this.$http({
				method:'post',
				url:"xxx",
				data:{
					name:'xiaoming'
					age:12
				}
			})
			.then(res =>{
				console.log)(res)
			})
			.catch(err => {
				console.log)(err)
			})
		},
		postData(){
			this.$http.post("xxx",`name=xiaoming&age=12`)
			.then(res =>{
				console.log)(res)
			})
			.catch(err => {
				console.log)(err)
			})
		},
		getDate(){
			this.$http({
				method:'get',
				url:"xxx",
				params:{
					name:'xiaoming'
					age:12
				}
			})
			.then(res =>{
				console.log)(res)
			})
			.catch(err => {
				console.log)(err)
			})
		}
	}
}

.post和.get

• .post(url,data,config)
• url:请求地址
• data：请求数据（post默认data）
• config： 配置 1.请求头信息（Content-Type:application/json（POST默认方式））2.
• .get(url,config)
• url:请求地址
• config:配置 params{}

axios一般写法

axios（{
url，
method：GET/POST|PUT，
data：post传递的数据
params：get传递的数据
headers：请求头信息
}）

axios关于默认配置

<!--在vue构架中的main.js中写  -->
axios.defaults.baseURL = 'https://api.example.com';

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios.defaults.timeout=5000
5秒超时

axios的封装

<!-- 在根目录中创建utills目录，并在器下创建request.vue -->
//导入
import axios from 'axios'
import jsonp from 'jsonp'
// 创建实例
var request = axios.create({
	baseURL:"http://www.520mg.com/",
	timeout:5000,
	headers:{post:{'Content-Type':'application/x-www-form-urlencoded'}}
})
//请求拦截（正在加载中）
//在每一次通过request去请求数据，对请求做拦截，处理相关业务
request.interceptors.request.use(
function(config){
	console.log("开始加载...")
	return config;
},
function(err){
	return Promise.reject(err)
}
)
// 响应拦截
request.interceptors.response.use(
function(response){
	console.log("加载完毕")
	return config;
},
function(err){
	console.log("加载结束")
	return Promise.reject(err)
}
)
request.jsonp = function(url,config){
	return new Promise((resolve,reject) =>{
		jsonp(url,config,function(err,data){
			if(err){reject(err)}else{
				resolve(data)
			}
		})
	})
}
//导出
export default request;