https://blog.csdn.net/Kris_xiaoxiao/article/details/125676627
这位博主写的很详细,留做参考
axios请求使用
方式一:
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios({
method: 'get',
url: 'http://bit.ly/2mTM3nY',
responseType: 'stream'
})
.then(function (response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
方式二:
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.delete(url[, config])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
config为请求配置对象(https://www.axios-http.cn/docs/req_config)
content-type分析
含义:在HTTP协议消息头中,使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据,以及告诉客户端(一般是浏览器)如何解析响应的数据,比如显示图片,解析并展示html等等。
HTML文档标记:text/html; JPEG图片标记:image/jpeg; GIF图片标记:image/gif; js文档标记:application/javascript; xml文件标记:application/xml;
- application/x-www-form-urlencoded 一般用于表单提交。
HTTP会将请求参数用key1=val1&key2=val2
的方式进行组织,并放到请求实体里面,注意如果是中文或特殊字符如"/“、”,“、“:” 等会自动进行URL转码。 - multipart/form-data 支持文件上传
多部分多媒体类型。首先生成了一个 boundary 用于分割. - application/json
JSON 是一种轻量级的数据格式,以键-值对的方式组织的数据。需要参数本身就是json格式的数据,参数会被直接放到请求实体里。服务端/客户端会按json格式解析数据
axios二次封装
import axios from 'axios'
import store from '@/store/index'
const instance = axios.create({
baseURL: '/api/',
timeout: 1000,
headers: { 'X-Custom-Header': store.getters.getToken }
});
/*
get('xxx', {params:{ id : 12 }} ) --- 注意get这里必须要用{}包裹params
*/
const get = (url, params, config) => { // param放在地址栏中的api?a='34'
const getConfig = {}
if (params) {
Object.assign(getConfig, params)
}
if (config) {
Object.assign(getConfig, config)
}
return instance.get(url, getConfig)
}
/*
post('xxx', {id: 12, name:'zs'})
*/
const post = (url, data, config) => { // 创建更新数据,data中的数据看不到,content-type:wwww-urlencode, form-data(文件传输)
return instance.post(url, data, config)
}
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if (config.method.toUpperCase() === 'POST') {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export {
get,
post
}
以上内容仅供参考。