Skip to content

Latest commit

 

History

History
256 lines (207 loc) · 5.38 KB

axios.md

File metadata and controls

256 lines (207 loc) · 5.38 KB
// get

new Vue({
	el: '#app',
	data() {
		return {
			info: null
		}
	},
	mounted() {
		axios.get('...url')
		.then(response => (this.info = response))
		.catch(function (error) {
			// 请求失败处理
			console.log(error);
		})
	}
})

// 传递参数
// 直接在url 上添加参数 id = 1
axios.get('/user?id=1')
.then(function(response) {
	console.log(response);
})
.catch(function(error) {
	console.log(error);
});

// 也可通过 params 设置参数
axios.get('/user', {
	params: {
		id: 1
	}
})
.then(function (response) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});

// post方法

new Vue({
	el: '#app',
	data() {
		return {
			info: null
		}
	},
	mounted() {
		axios.post('xxxurl')
		.then(response => (this.info = response))
		.catch(function (error){
			// 请求失败处理
			console.log(error);
		});
	}
})


axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
  
axios(config)
// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//  GET 请求远程图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios(url[, config])
// 发送 GET 请求(默认的方法)
axios('/user/12345');

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.all(iterable)
axios.spread(callback)

创建实例
可以使用自定义配置新建一个 axios 实例:

axios.create([config])
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// - 浏览器专属:FormData, File, Blob
// - Node 专属: Stream

// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求花费了超过 `timeout` 的时间,请求将被中断

// `withCredentials` 表示跨域请求时是否需要使用凭证
// `responseType` 表示服务器响应的数据类型,可以是 "arraybuffer", "blob", "document", "json", "text", "stream"

// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000,

// "proxy" 定义代理服务器的主机名称和端口
// `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
	// 在发送请求之前做些什么
	return config;
}, function (error) {
	// 对请求错误做些什么
	return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
	// 对响应数据做点什么
	return response;
}, function(error) {
	// 对响应错误做点什么
	return Promise.reject(error);
})

// 如果你想在稍后移除拦截器,可以这样:

var myInterceptor = axios.interceptors.request.use(function () {})

// axios.interceptors.request.use
// axios.interceptors.response.use

axios.interceptors.request.eject(myInterceptor);

// 可以为自定义 axios 实例添加拦截器。

var instance = axios.create();
instance.interceptors.request.use(function() {})

// 错误处理
axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出,但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });


取消
使用 cancel token 取消请求

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/123',{
	cancelToken: source.token
}).catch(function(thrown) {
	if(axios.isCancel(thrown)) {
		console.log('canceled', thrown.message);
	} else {
		// 处理错误
	}
});

// 取消请求
source.cancel('error')


// 还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();



// 览器

// 在浏览器环境,你可以使用 URLSearchParams API:

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

// URLSearchParams 不是所有的浏览器均支持。

// 除此之外,你可以使用 qs 库来编码数据:

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

// Or in another way (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);