axios的使用

一、axios的下载

        1.在javascript中可以通过bootcdn(https://www.bootcdn.cn/axios)中获取script标签和链接

        2.在node中，直接在打开当前目录的控制台，输入 npm  install axios --save,进行安装，如果没有进行过初始化，先要执行 npm init 命令，先进行初始化。初始成功的条件是，在初始化的目录下会生成一个package.json的文件。

二、axios的请求配置

一、axios的静态方法API

        1.直接执行axios函数 ，他传递一个对象为参数，对象有指定的格式，代码如下：

axios({
method:"请求方式(get/post)";=
  url: 'url地址',
// get/post 传递的参数， get 默认为拼接字符串  post默认为json格式
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
//设置请求头
headers:{
'xx':'xxxxxxxxxx'
}
}).then((res) => {
    //成功的回调    
    consloe.log(res);
  })
  .catch((res) => {
    //失败的回调
    consloe.log(res);
  });

        2.快捷方式 get /post

        注意：

                在get方法的参数为两个，（url地址，{params:{传递参数}}），第二个参数是一个对象，这个对象不是传递的数据，在这个对象中params属性，这个对象才是传递的参数。

                在pos方法中参数为三个，（url地址，{传递数据}，{配置请求头}）。

//get请求
//axios.get(url地址,{ params:{get请求传递的参数} headers:{在请求头设置的配置}})
axios.get('/user', {
    params: {
      ID: 12345
    }
  }).then((res) => {
    //成功的回调    
    consloe.log(res);
  })
  .catch((res) => {
    //失败的回调
    consloe.log(res);
  });

//post请求
//axios.post(url地址,{post传递的参数}，{请求头设置})
axios
  .post("/user", {
    firstName: "Fred",
    lastName: "Flintstone",
  })
 .then((res) => {
    //成功的回调    
    consloe.log(res);
  })
  .catch((res) => {
    //失败的回调
    consloe.log(res);
  });

  二、axios实例方法

           使用axios.create()创建实例

const axiosTest= axios.create({
  baseURL: 'https://some-domain.com/api/',//配置默认的URL
  timeout: 1000,//设置超时时间
  headers: {'X-Custom-Header': 'foobar'}//设置请求头
});

         实例方法

       

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的响应结构

 // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码 状态码有500、404、304等等
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}

四、axios的请求配置

{
   // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数（get请求携带的参数，拼接到url上）
  params: {
    ID: 12345
  },

  // `data` 是作为请求主体被发送的数据 post请求
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  data: {
    firstName: 'Fred'
  },

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


 // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

   // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },


  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

}

五、配置默认值

axios.defaults.baseURL = 'https://api.example.com';//默认baseurl
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

六、axios的拦截器

        请求拦截器

// 添加请求拦截器
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);
  });

        移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

        在axios实例中 使用拦截器

const service = axios.create({})

// request interceptor
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
  
    return response
  },
  error => {
    return Promise.reject(error)
  }
)