axios 二次封装

# npm

npm install axios

npm install qs

• qs 的作用就是将对象序列化，多个对象之间用&拼接（拼接是由底层处理，无需手动操作）
• 使用qs只需要在要使用qs的组件里引入，然后直接使用它的方法即可
  
  
  
  

# 在 utils 文件夹下新建 axios.js 文件

/**
 * axios封装
 * 请求拦截，响应拦截，错误统一处理
 * 封装 get()，post() 方法
 */


import axios from 'axios'
import qs from 'qs'  // 引入qs，对 post 参数进行序列化

axios.defaults.timeout = 10 * 1000;// 设置请求超时 10s
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';// post 请求头

// 根据不同环境更改不同 baseUrl
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '开发环境api地址';  // 开发环境
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = '生产环境api地址';  // 生产环境
}

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



/**
 * 封装 get() 请求
 * get()方法，对应 axios.get()请求
 * url [请求的url地址]
 * params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    })
  });
}


/**
 * 封装 post() 请求
 * post()方法，对应 axios.post()请求
 * url [请求的url地址]
 * params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, qs.stringify(params)
    ).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    })
  });
}

# 在 main.js 中写入以下内容：

import {get, post} from "@/utils/axios";  // 引入axios 的 get，post 方法
Vue.prototype.$get = get;
Vue.prototype.$post = post;

# axios 使用

1、执行 GET 不带参请求

mounted() {
  this.$get('https://www.apiopen.top/weatherApi'
  ).then(res =>{
    console.log(res);
  })
},

2、执行 GET 带参请求

mounted() {
  this.$get('https://www.apiopen.top/weatherApi', {
    city: '阳江'
  }).then(res =>{
    console.log(res);
  })
},

3、执行 POST 请求

mounted() {

  let postData = {
    city: '阳江'
  };

  this.$post('/type/add', postData 
  ).then(res =>{
    console.log(res);
  })
},