vue学习-14-axios

网络请求响应axios

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

全局axios和axios实例

全局使用

import axios from 'axios'	
//使用全局axios
	axios({
		baseURL: '/kcsj_ssm',//公共地址串
		url: '/user/allParkDepot',
		//url: '/kcsj_ssm/user/allParkDepot',
		timeout: 5000,//超时时间
		//get传递参数：url拼接或者,params
		params: {
			id: 1,
			name: '张三'
		},
		/* data:{
			id: 1,
			name: '张三'
		} */
	}).then(res => {
		console.log(res)
	}).catch(error => {
		console.log(error)
	})

全局默认配置：axios.defaults

	import axios from 'axios'
	//axios全局配置
	axios.defaults.baseURL = '/kcsj_ssm'
	axios.defaults.timeout = 6000
	export default {
		name: 'axios_set',
		methods: {
			click1() {
				axios({
					url: '/user/allParkDepot'
				}).then(res => {
					console.log(res)
				})
			}
		}
	}

使用全局axios，所有发送的请求的配置都是相同的。如果在功能上不同的模块功能请求不同的服务器，使用全局axios需要在每次具体的请求中配置具体的信息。

使用axios实例

const ins = axios.create({
		baseURL: '/kcsj_ssm',
		timeout: 5000,
		//headers:{'Content-Type':'application/json'}
	})
	ins.post('/user/allParkDepot')

使用post传递参数：

1、使用Qs

import Qs from 'qs
ins.post('/user/allParkDepot',Qs.stringify(data))

2、URLSearchParams

var data =new URLSearchParams()
data.append('userId',3)
ins.post('/user/allParkDepot',data)

方法使用

axios(config)

			axios({
					baseURL: '/kcsj_ssm',//公共地址串
					url: '/user/allParkDepot',
					timeout: 5000,//超时时间
					params: {
						id: 1,
						name: '张三'
					},
					//post等传递参数
					/* data:{
						id: 1,
						name: '张三'
					} */
				}).then(res => {
					console.log(res)
				}).catch(error => {
					console.log(error)
				})

axios.get(url[, config]) Content-Type:

ins.get(config.url,{
		params: {
			userId: 3
		},
		headers: {
			'Content-Type': 'multipart/form-data',
			//'Content-Type': 'application/x-www-form-urlencoded'
		}
	})

axios.post(url[, data[, config]])
 'Content-Type': 'application/x-www-form-urlencoded'

	var data= {'userId': '3'}
	ins.post(config.url,Qs.stringify(data))
	//ins.post(config.url,Qs.stringify(data),{
		//headers: {
			//'Content-Type': 'application/x-www-form-urlencoded'
		//} 
	//})

传递json数据 'Content-Type': 'application/json'

ins.post(config.url,JSON.stringify(data),{
		headers: {
			'Content-Type': 'application/json'
		}

Content-Type: multipart/form-data