vue axios 데이터 요청 및 vue 에서 axios 를 사용 하 는 방법

axios 프로필
axios 는 Promise 를 기반 으로 브 라 우 저 와 nodejs 에 사용 되 는 HTTP 클 라 이언 트 로 그 자체 가 다음 과 같은 특징 을 가지 고 있 습 니 다.
브 라 우 저 에서 XML HttpRequest 를 만 듭 니 다. node. js 에서 http 요청 을 보 냅 니 다. Promise API 지원 • 차단 요청 과 응답 • 변환 요청 과 응답 데 이 터 를 지원 합 니 다. 요청 취소 • JSON 데이터 자동 변환 • 클 라 이언 트 지원 CSRF / XSRF 방지
vue 에서 데이터 요청 은 axios 를 먼저 설치 해 야 합 니 다. npm i --save axios
요청 한 데 이 터 를 사용 하 는 페이지 에서 axios 가 져 오기import  axios from "axios"
그리고 methods 에 데 이 터 를 써 달 라 는 요청 입 니 다.

 methods:{
  getInfo(){
   let url = "url"
   axios.get(url).then((res)=>{
     //console.log(res)
     this.list1 = res
   })
}

라 이 프 사이클 에서 호출 합 니 다. 일반적으로 우리 데이터 가 요청 한 라 이 프 사이클 은 Mounted 입 니 다.

 mounted() {
  this.getInfo()       
 }

이렇게 해서 저희 가 axios 의 get 방법 요청 을 완 료 했 습 니 다.
그리고 저 희 는 간단하게 post 요청 을 말씀 드 리 겠 습 니 다. post 요청 과 get 요청 이 많 지 않 습 니 다.

 postInfo() {
   let url = "..."
   var params = new URLSearchParams();
   params.append('key', index);
   axios.post(url, params).then((res) => {
     console.log(res)
   })
 }

이렇게 하면 우 리 는 성공 적 으로 post 방법 으로 데 이 터 를 요청 할 수 있다.
다음 vue 에서 axios 사용 하기
1. axios 설치
npm： $ npm install axios -S
cdn：
2. axios 설정
프로젝트 에 api / index. js 파일 을 새로 만 들 고 axios 를 설정 합 니 다.
api/index.js

import axios from 'axios';
let http = axios.create({
 baseURL: 'http://localhost:8080/',
 withCredentials: true,
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
 },
 transformRequest: [function (data) {
  let newData = '';
  for (let k in data) {
   if (data.hasOwnProperty(k) === true) {
    newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
   }
  }
  return newData;
 }]
});
function apiAxios(method, url, params, response) {
 http({
  method: method,
  url: url,
  data: method === 'POST' || method === 'PUT' ? params : null,
  params: method === 'GET' || method === 'DELETE' ? params : null,
 }).then(function (res) {
  response(res);
 }).catch(function (err) {
  response(err);
 })
}
export default {
 get: function (url, params, response) {
  return apiAxios('GET', url, params, response)
 },
 post: function (url, params, response) {
  return apiAxios('POST', url, params, response)
 },
 put: function (url, params, response) {
  return apiAxios('PUT', url, params, response)
 },
 delete: function (url, params, response) {
  return apiAxios('DELETE', url, params, response)
 }
}

POST, GET, PUT, DELETE 방법 이 설정 되 어 있 습 니 다.JSON 형식 데 이 터 를 자동 으로 URL 맞 춤 법 으로 변환 합 니 다.
크로스 도 메 인 을 동시에 설정 하 였 습 니 다. 필요 하지 않 으 면 withCredentials 를 false 로 설정 하면 됩 니 다.
기본 머리 주 소 를 설정 하 였 습 니 다:http://localhost:8080/이렇게 호출 할 때 접근 방법 만 쓰 면 됩 니 다.
3. axios 사용
주의: PUT 요청 은 기본적으로 두 번 의 요청 을 보 냅 니 다. 첫 번 째 예비 검사 요청 에는 인자 가 포함 되 어 있 지 않 기 때문에 백 엔 드 에서 PUT 요청 주 소 를 매개 변수 로 제한 할 수 없습니다.
우선 main. js 에 도입 방법

import Api from './api/index.js';
Vue.prototype.$api = Api;

그리고 필요 한 곳 에서 호출 하면 됩 니 다.

this.$api.post('user/login.do(  )', {
  "   ": "   "
}, response => {
   if (response.status >= 200 && response.status < 300) {
    console.log(response.data);\\    ，response       
   } else {
    console.log(response.message);\\    ，response     
   }
});