vue的接口封裝，post，get，delete，put，axios封裝方法

一、vue的接口封裝：
1. 引入axios封裝方法（config.js）
2. 封裝接口(userApi.js)，代碼如下：
import request from './config.js' export function userData(data){ return request({ url:'您的url地址', method:'get', data:data }) }
3. 在vue文件使用這個封裝方法。（user.vue），代碼如下：
import { userData } from '../../api/userApi.js'getAllUser() { let token = sessionStorage.getItem('token') let header_token = { Authorization: "bearer " + token } userData({header_token}).then(res => { console.log("獲取用戶詳情", res); }) }// 注意：這里導入只能是import { userData,方法名1,方法名2 } from '../../api/userApi.js',不能使用 import 自定義名字 from '../../api/userApi.js// 再次注意：下面使用的時候只能是：方法名(data).then(res => {}).catch(err => {}) 不能使用自定義名字.方法名

二、post，get，delete，put方法封裝
1.文件名字為：config.js，代碼如下：
`/ 引入axios
import axios from 'axios'
// 引入qs
import qs from 'qs'
// 封裝 get, post, delete, put方法
/**

• get方法，對應get請求
• @param {String} url [請求的url地址]
• @param {Object} params [請求時攜帶的參數]
  /
  export function get(url, params){
  return new Promise((resolve, reject) => {
  axios.get(url, {
  params:params
  }).then(res => {
  resolve(res.data);
  // Loading.service(true).close();
  // Message({message: '請求成功', type: 'success'});
  }).catch(err => {
  reject(err.data);
  // Loading.service(true).close();
  // Message({message: '加載失敗', type:'error'});
  })
  })
  }
  /*
• post方法，對應post請求
• @param {String} url [請求的url地址]
• @param {Object} params [請求時攜帶的參數]
  /
  export function post(url, params) {
  return new Promise((resolve, reject) => {
  axios.post(url, params)
  .then(res => {
  resolve(res.data);
  // Loading.service(true).close();
  // Message({message: '請求成功', type: 'success'});
  })
  .catch(err => {
  reject(err.data)
  // Loading.service(true).close();
  // Message({message: '加載失敗', type: 'error'});
  })
  });
  }
  /*
• post方法，參數序列化
• @param {String} url [請求的url地址]
• @param {Object} params [請求時攜帶的參數]
  /
  export function qspost(url, params) {
  return new Promise((resolve, reject) => {
  axios.post(url, qs.stringify(params))
  .then(res => {
  resolve(res.data);
  // Loading.service(true).close();
  // Message({message: '請求成功', type: 'success'});
  })
  .catch(err => {
  reject(err.data)
  // Loading.service(true).close();
  // Message({message: '加載失敗', type: 'error'});
  })
  });
  }
  /*
• put方法，對應put請求
• @param {String} url [請求的url地址]
• @param {Object} params [請求時攜帶的參數]
  /
  export function put(url, params) {
  return new Promise((resolve, reject) => {
  axios.put(url, params)
  .then(res => {
  resolve(res.data);
  // Loading.service(true).close();
  // Message({message: '請求成功', type: 'success'});
  })
  .catch(err => {
  reject(err.data)
  // Loading.service(true).close();
  // Message({message: '加載失敗', type: 'error'});
  })
  });
  }
  /*
• delete
• @param {String} url [請求的url地址]
• @param {Object} params [請求時攜帶的參數]
  */
  export function deletefn(url, params) {
  return new Promise((resolve, reject) => {
  axios.delete(url, params)
  .then(res => {
  resolve(res.data);
  // Loading.service(true).close();
  // Message({message: '請求成功', type: 'success'});
  })
  .catch(err => {
  reject(err.data)
  // Loading.service(true).close();
  // Message({message: '加載失敗', type: 'error'});
  })
  });
  } 2.在其他文件(user.js)里面導入上面的四個請求，代碼如下：// 引入封裝好的方法
  import { get, post, qspost, put, deletefn } from './config.js'
  // 這是為了模塊化，比如登錄模塊，注冊模塊，購物車模塊在這個文件里面，到時候如果需要登錄模塊，就可以直接引用這里面的方法
  export const getAllUser = data => post("url", data) 3.最后在vue文件里面使用模塊化代碼，代碼如下：import {getAllUser} from '../../api/user.js'
  let header_token = {
  Authorization: "bearer " + token
  }
  getAllUser(header_token).then(res => {
  console.log("獲取用戶詳情", res);
  })`

三、vue里面的axios封裝，代碼如下：
`// 引入axios
import axios from 'axios'

// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 創建一個axios實例
const service = axios.create({
// 請求超時時間
timeout: 3000,
// baseURL: 'http://'
// baseURL : '/oauth'
// baseURL : '/'
})

// 添加請求攔截器
service.interceptors.request.use(config => {
//config是axios配置對象
// 在發送請求之前做些什么
//每次發送請求前都會進入此攔截器處理函數，可以在此處統一攜帶上token，每次請求都會自
// config.headers.common['token'] = localStorage.getItem(“token”);
let token = window.sessionStorage.getItem('token')
config.headers.common['Authorization'] = 'bearer '+token;
console.log("config是axios配置對象", config)
return config;
},
err => {
// 對請求錯誤做些什么
console.log("請求出錯的處理函數", err);
return Promise.reject(err)
}
)

// 添加響應攔截器
service.interceptors.response.use(function(response){
// 對響應數據做點什么
//收到響應后，可以先統一處理錯誤碼
// switch (res.data.code) {
// case 10001: alert(‘非法操作’);
// router.push({path: '/});
// case 10002: alert(‘權限不足’);
// ......
// }
let res={}
res.status = response.status
res.data = response.data
return res
},function(err){
// 對響應錯誤做點什么
//響應出錯進入的函數
console.log("請求出錯的處理函數",err);
return Promise.reject(err)
})

export default service`

四、vue的get請求的四種方法

1. 方法一：

        最基礎的方式，get請求可以直接在url后面用?來把參數直接帶上去(只有get自帶的特殊的方式)
2. 方法二：

        最通用的方式，不論是get請求，還是post請求，或者是delete請求，亦或者是put請求都可以用，直接是用this.$http.請求方式('url',{參數},headers),當然其中還是有區別的，但是框架都差不多的。            其中的區別是：get請求：this.$http.get('url', {params:{id:1, name:"lili"}).then(res=>{}).catch(err=>{})                                    post請求：this.$http.post('url', {id:1, name:"lili"}).then(res=>{}).catch(err=>{})                                    put請求：this.$http.put('url', {id:123, name:"lili"}).then(res=>{}).catch(err=>{})                                    delete請求：this.$http.delete('url', {id:12345}).then(res=>{}).catch(err=>{})            我這知識寫了他們在vue方法之間的區別，其他的區別以后再說，比如什么簡單請求，復雜請求需要option預檢，post請求發起的跨域問題等等一些問題
3. 方法三：

        這個方法是對vue里面的axios，get請求，還是post請求，或者是delete請求，亦或者是put請求 等都進行封裝處理的，然后再進行調用的[封裝方法見我的其他文章]
4. 方法四：
        這個方法也是對vue進行封裝的，但是只是對接口和axios進行了封裝，沒有對請求方式進行封裝處理(個人建議用第四種方法)[封裝方法見我的其他文章]// 方法一                // this.$http.get('http://172.26.92.85:10030/user/detail/aaa?Authorization=bearer ' + token).then(res => {                //     console.log("獲取用戶詳情", res);                //     if (res.data.code == 200) {                //         this.$message('獲取用戶詳情成功')                //     } else(                //         this.$message('獲取用戶詳情失敗')                //     )                // }).catch(err => {                //     this.$message('獲取用戶詳情失敗')                // })                // 方法二                // this.$http.get('http://172.26.92.85:10030/user/detail/aaa', {                //         Authorization: "bearer " + token                // }).then(res => {                //     console.log("獲取用戶詳情", res);                // })                // 方法三                let header_token = {                    Authorization: "bearer " + token                }                // getAllUser(header_token).then(res => {                //     console.log("獲取用戶詳情", res);                // })                // 方法四                userData({header_token}).then(res => {                    console.log("獲取用戶詳情", res);                })