axios 浏览器支持情况

客户端安装axios

<script src="//cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

使用npm安装axios

npm install axios --save

发送一个GET请求

// 第一个参数是请求地址， 第二个参数是一个对象，params是一个发送URL参数
// 请求示例：/fetch?name=xiejiahe
// GET请求第二个参数要不要无所谓，你可以在请求地址拼接参数， 但是有点麻烦。

axios.get('/fetch', {
		params: {
			name: 'xiejiahe'
		}
	})
	.then(res => {
	// 请求成功后要做什么？（注意axios默认是application/json; charset=utf-8，如果后端返回其他数据类型会报错）
		console.log(res)
	})
	.catch(e => {
	// 失败后要做什么？ 一般是请求地址有误或超时等
		console.log(e)
	})

发送一个POST请求, 跟GET有点相似

// 注意了第二个参数是data，和body一起发送的数据

axios.post('/fetch', {
			name: 'xiejiahe'
	})
	.then(res => {
	// 请求成功后要做什么？（注意axios默认是application/json; charset=utf-8，如果后端返回其他数据类型会报错）
		console.log(res)
	})
	.catch(e => {
	// 失败后要做什么？ 一般是请求地址有误或超时等
		console.log(e)
	})

除了GET/POST 还支持，用法是基本是相似

不要只用GET和POST， 多用用delete, put 遵循REST API 设计思想。

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

axios底层配置，他相当于jquery（$.ajax）

axios({
    // 请求地址
    url: '/fetch',
    
    // 请求方法，默认GET，不区分大小写,推荐大写
    method: 'GET',
    
    // 会被添加到URL中，比如 http://www.xiejiahe.com/fetch ，你可以理解为换了请求地址
    baseURL: 'http://www.xiejiahe.com',
    
    // 请求头, 可以更改默认的头，axios默认是不带X-Requested-With
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        ContentType: 'text/plain',
    },
    
    // 很多人不理解params和data的区别，params是GET请求的参数
    params: {
        name: 'XieJiaHe'
    },
    
    // 而dadta是POST请求的参数是不带在URL地址里的
    data: {
        name: 'XieJiaHe',
    },
    
    // 设置请求超时时间， 会在catch捕获
    timeout: 3000,
    
    // 身份验证，如果你的请求地址是需要用户名和密码的话
    auth: {
        username: 'xiejiahe',
        password: 'root'
    },
    
    // 响应类型，默认是json的
    // 支持的类型：'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' 
    responseType: 'json',
    
    // 最大Content-Length, 这个是请求头
    maxContentLength: 3000,
    
    // 代理
    proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
            username: 'your username',
            password: 'your password'
        }
    },
    // 允许修改请求的数据在发送到服务
    // 只适用于 'PUT'、'POST'、'PATCH' 请求
    // 函数必须返回字符串或ArrayBuffer、 FormData或Stream
    transformRequest: [function (data, headers) {
        // 你可以在这里处理你想要的数据
        return data;
    }],
    // 修改响应数据
    transformResponse: [function (data) {
        // 你可以在这里处理你想要的数据
        return data;
    }],
})

全局配置

// 配置请求URL
axios.defaults.baseURL = 'https://www.xiejiahe.com';

// 每次请求带上的头信息
axios.defaults.headers.common['x-access-token'] = 'token';

// 只有post的时候才带上的头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 请求超时时间
axios.defaults.timeout = 5000;

拦截器已有另一篇文章，点击这里