axios请求方法与示例以及拦截器

一，axios请求方法（post和put方法）

…axios.post()有以下3个参数

（1）url路径：请求的后台接口路径。
（2）data：请求数据。
（3）config：

…post请求数据格式(两种)

1.from-data：用于表单提交。在旧的网页一般都是用表单提交，就是用于数据交互，而现在大多数网站都是通过AJAX进行数据交互，但表单提交仍然存在，因为上传数据和文件都需要用form-data格式

• from-data示例

	let data = {id:12},
	let fromData = new FormData();
	for(let key in data){
		let value = data[key];
		formData.append(key,value);
    }
    axios.post('static/post.json',formData)
    .then(res=>{
		console.log(res)
     })

2.application/json：现在大多数情况下都用这种模式，因为JSON文件用的比较广泛，所以application/json做交互。

• application/json示例

let data = { id:12 },
axios.post('static/post.json',data)
.then(res=>{
console.log(res)
})

二，创建实例与拦截器

（1）创建实例

	const request = axios.create({
	baseURL:"填写基本路径"，
	timeout:"请求超时时长限制，单位是毫秒"，
	url:"请求路径通常是具体的执行接口的详细相对路径"，
	method:"请求方法，包括get，post，put，delete，patch常用方法"，
	headers:{
	    token:""
	},
	params:{跟在URL后面的参数，多个参数会自动用&连接},
	data:{在请求体中的参数}
	})，

(2) 请求拦截器

 request.interceptors.request.use(
 config=>{
 	// 根据需要添加
    // config.headers.Authorization = 'Bearer ' + localStorage.getItem("token");
 	return config
 	// 可根据添加  加载中...
 },
 err=>{
 	return Promise.reject(err)
 }
 )

(3) 响应拦截器

  request.interceptors.response.use(
  res=>{
  	return res
  //	toast.clear();
  //	Promise.resolve(err);
  //	return err;
  },
  err=>{
  	return err
  //	toast.clear();
  //	Promise.resolve(err);
  //	return err;
  }
  )

(4) 创建多个实例

  实例一
  const request1=axios.create({
  baseURL:"填写基本路径"，
  timeout:"请求超时时长限制，单位是毫秒"
  })，
  实例二
  const request2=axios.create({
  baseURL:"填写基本路径"，
  timeout:"请求超时时长限制，单位是毫秒"
  })，
  拦截实例一
  reques1.interceptors.request.use(
  config=>{
  	return config
  },
  err=>{
    return err
  }
  ),
  request1.response.use(
  res=>{
  	return res
  },
  err=>{
  	return err
  }
  ),
  拦截实例二
  request2.interceptors.request.use(config=>{
     return config
  },
  err=>{
  	return err
  }
  ),
  request2.intercaptors.response.use(
  res=>{
  	return res
  },
  err=>{
  	return err
  }
  )