学习axios

一、安装axios

1.使用npm:$ npm install axios

2.使用bower:$ bower install axios

3.使用cdn:

二、axios中常用的配置对象有哪些

axios({

        url:''   //请求路径,

        methods:''   //请求方式

        params:{},  //get携带参数

        data:{},    //post携带参数

        headers:{}   //请求头

        timeout:1000   // 表示请求超过timeouts时间没有响应就中断请求

        responseType: 'json'  //规定后端返回的数据格式

})

三、axios的特点

1.axios的默认请求是get请求,默认数据格式是json格式

2.基于promise的http库

3.可以调用promise的api

4.axios请求头的数据格式会自动转化

四、axios发送异步请求是的请求方式

1.get方法:get方法包括有参和无参两种情况


  

2.post方法:post方法包括无参和有参,有参中又分为JSON型的还是表单型的


  

五、axios调用promise中的实例方法


  

六、axios的快捷方法


    

七、axios实例和全局配置


  

八、axios拦截器:拦截器有请求拦截器和响应拦截器


  

九、封装axios

1.下载axios

npm i -S axios

2.将axios引入封装的文件

import axios from 'axios'

3.创建一个axios实例

4.设置请求拦截

5.设置响应拦截

6.进行封装方法

7.导出整个实例

import axios from 'axios';
import Qs from 'qs';
let qs = Qs;
// 1.创建一个axios实例
let instance = axios.create({
  baseURL: 'http://...',
  timeout: 5000,
});
// 2.请求拦截器
instance.interceptors.request.use(config => {
  if (config.url !== '/user/login') {
    config.headers.Authorization = '....'
  }
  return config
}, error => {
  return Promise.reject(error)
});
// 3.响应拦截
instance.interceptors.response.use(response => {
  let res = response.data;
  return res;
}, error => {
  return Promise.reject(error)
});
// 封装get方法
export function get (url, params) {
  return instance.get(url, {
    params,
  })
};
// 封装post方法  json类型
export function postJSON (url, data) {
  return instance.post(url, data);
}
// 封装post方法   表单类型
export function post (url, data) {
  return instance.post(url, qs.stringify(data))
}
// 导出instance这个模块
export default instance

你可能感兴趣的:(前端,javascript)